OfficeApp/components/newArchives/thickProcessing.vue

<!-- 粗加工 -->
<template>
  <view>
    <view class="tit">
      <text v-if="readonly">更新时间: {{update_time}}</text>
      <text>粗加工</text>
    </view>
    <view class="card">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
        <u-form-item labelWidth="auto" label="是否在经营" required prop="is_manage" borderBottom>
          <u-radio-group :disabled="readonly" v-model="formData.is_manage" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <block v-if="formData.is_manage">
          <u-form-item labelWidth="auto" label="有无建设用地" required prop="construction_land" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.construction_land" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="面积(m²)" required prop="land_area" borderBottom>
            <u--input :readonly="readonly" v-model="formData.land_area" type="number" placeholder="请输入面积(m²)"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="经营地点" required prop="manage_place" borderBottom>
            <u--input :readonly="readonly" v-model="formData.manage_place" placeholder="请输入经营地点"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="材料来源" required prop="source_materials" borderBottom>
            <u--input :readonly="readonly" v-model="formData.source_materials" placeholder="请输入材料来源"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无销售渠道" required prop="marketing_channel" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.marketing_channel" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无技术指导" required prop="technical_guidance" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.technical_guidance" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无品牌" required prop="brand" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.brand" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无宣传推广" required prop="advertising" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.advertising" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无运输" required prop="transport" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.transport" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" labelPosition="top" label="经营诉求" prop="business_appeal" borderBottom>
            <u--textarea :disabled="readonly" v-model="formData.business_appeal" autoHeight placeholder="请输入经营诉求" border="surround"
              count></u--textarea>
          </u-form-item>
        </block>
        <block v-else>
          <u-form-item labelWidth="auto" label="有无建设用地" required prop="construction_land" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.construction_land" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <picker :range="storeTypeList" mode="selector" :disabled="readonly" @change="changeLanPlan">
            <u-form-item labelWidth="auto" label="经营类型" required prop="manage_type" borderBottom>
              <u--input :readonly="readonly" :value="storeTypeList[formData.manage_type]" style="pointer-events: none;" placeholder="请选择经营类型"
                disabled disabledColor="#fff"></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </picker>
          <u-form-item labelWidth="auto" label="经营地点" required prop="manage_place" borderBottom>
            <u--input :readonly="readonly" v-model="formData.manage_place" placeholder="请输入经营地点"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="人数" required prop="people_count" borderBottom>
            <u--input :readonly="readonly" v-model="formData.people_count" type="number" placeholder="请输入人数"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无食堂" required prop="canteen" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.canteen" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="材料来源" required prop="source_materials" borderBottom>
            <u--input :readonly="readonly" v-model="formData.source_materials" placeholder="请输入材料来源"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="自动化办公程度" required prop="automation" borderBottom>
            <u--input :readonly="readonly" v-model="formData.automation" placeholder="请输入自动化办公程度"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无用工需求" required prop="employment" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.employment" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无品牌" required prop="brand" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.brand" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无宣传推广" required prop="advertising" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.advertising" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" label="库存情况" required prop="repertory" borderBottom>
            <u--input :readonly="readonly" v-model="formData.repertory" placeholder="请输入库存情况"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="有无运输" required prop="transport" borderBottom>
            <u-radio-group :disabled="readonly" v-model="formData.transport" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item labelWidth="auto" labelPosition="top" label="经营诉求" prop="business_appeal" borderBottom>
            <u--textarea :disabled="readonly" v-model="formData.business_appeal" autoHeight placeholder="请输入经营诉求" border="surround"
              count></u--textarea>
          </u-form-item>
        </block>
      </u--form>

    </view>
  </view>
</template>

<script>
  export default {
    props: {
    	readonly: {
    		type: Boolean,
    		default: false
    	},
    	datas: {
    		type: Object,
    		default: null
    	},
    	update_time: {
    		type: String,
    		default: null
    	},
    },
    data() {
      return {
        storeTypeList: ['超市', '生鲜', '饭店', '五金', '杂货', '服装', '文具', '其他'],
        formData: {
          is_manage: "", //是否正在经营
          construction_land: "", //有无建设用地
          land_area: "", //面积
          manage_place: "", //经营地点
          source_materials: "", //材料来源
          marketing_channel: "", //有无销售渠道
          technical_guidance: "", //有无技术指导
          brand: "", //有无品牌
          advertising: "", //有无宣传推广
          transport: "", //有无运输
          business_appeal: "", //经营诉求
          manage_type: "", //经营类型
          people_count: "", //人数
          canteen: "", //食堂
          automation: "", //自动化办公程度
          employment: "", //用工需求
          repertory: "", //库存
        },
        rules: {

        }
      }
    },
    created() {
    	this.initRules();
    	if (this.$props.readonly && this.$props.datas) {
    		this.formData = this.$props.datas;
    		let keys = Object.keys(this.formData);
    		keys.forEach(item => {
    			if (!isNaN(this.formData[item])&&this.formData[item]!=''&&this.formData[item]!=null&&this.formData[item]!=undefined){
    			  parseFloat(this.formData[item])!='NaN'?this.formData[item] = parseFloat(this.formData[item]):null;
    			} 
    		})
    	}
    },
    watch: {
    	datas(newValue, oldValue) {
    		if (this.$props.readonly && newValue) {
    			this.formData = this.$props.datas;
    			let keys = Object.keys(this.formData);
    			keys.forEach(item => {
    				if (!isNaN(this.formData[item])&&this.formData[item]!=''&&this.formData[item]!=null&&this.formData[item]!=undefined){
    				  parseFloat(this.formData[item])!='NaN'?this.formData[item] = parseFloat(this.formData[item]):null;
    				} 
    			})
    		}
    	}
    },
    methods: {
      // 初始化校验
      initRules() {
        let arr = Object.keys(this.formData);
        arr = arr.filter(item=>{
          return item!="business_appeal"
        })
        arr.forEach(key => {
          this.rules[key] = {
            validator: (rule, value, callback) => {
              this.$refs.breedingForm.clearValidate(rule.field);
              value.trim() !== '' ? callback() : callback('不能为空');
            },
            trigger: ['change', 'blur']
          }
        })
      },
      // 校验
      async validate() {
        return await this.$refs.breedingForm.validate();;
      },
      // 选择经营类型
      changeLanPlan(e) {
        let index = e.currentTarget.dataset.index;
        this.formData.manage_type = e.detail.value;
      },
      
    },
  }
</script>

<style lang="scss">
  .card {

    background-color: #fff;

    margin: 28rpx;

    padding: 28rpx;

    margin-top: 0;

    padding-top: 0;

    border-radius: 0 0 14rpx 14rpx;

  }



  .tit {

    margin: 28rpx 28rpx 0 28rpx;

    padding: 28rpx 28rpx 0 28rpx;

    border-radius: 14rpx 14rpx 0 0;

    background-color: $theme-oa-color;

    color: white;

    height: 100rpx;

    display: flex;

    justify-content: space-between;

  }

  .title {
    font-weight: 500;
    font-size: 34rpx;

    &::before {
      width: 8rpx;
      height: 26rpx;
      border-radius: 4rpx;
      background-color: #0122c7;
      content: "";
      display: inline-block;
      margin-right: 8rpx;
    }
  }

  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }
</style>