<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    :visible.sync="visible" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="confirm" 
 | 
  > 
 | 
    <el-form :model="form" ref="form" :rules="rules"> 
 | 
      <el-form-item label="属性名称:" prop="name"> 
 | 
        <el-input v-model="form.name" placeholder="请输入属性名称" max="20" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="工序:" prop="procedureId"> 
 | 
        <el-select style="width:48%;" v-model="factory" placeholder="请选择工厂" @visible-change="visibleChange" :loading="loading" filterable clearable @change="selectFactory"> 
 | 
          <el-option 
 | 
            v-for="item in factoreis" 
 | 
            :key="item.id" 
 | 
            :label="item.name" 
 | 
            :value="item.id" 
 | 
          > 
 | 
          </el-option> 
 | 
        </el-select> 
 | 
        <div style="width:4%;display: inline-block;"></div> 
 | 
        <el-select style="width:48%" v-model="form.procedureId" filterable clearable placeholder="请选择工序"> 
 | 
          <el-option 
 | 
            v-for="item in productes" 
 | 
            :key="item.id" 
 | 
            :label="item.name" 
 | 
            :value="item.id" 
 | 
          > 
 | 
          </el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="字段类型:" prop="type"> 
 | 
        <el-select v-model="form.type" filterable clearable placeholder="请选择字段类型"> 
 | 
          <el-option 
 | 
            v-for="item in options" 
 | 
            :key="item.id" 
 | 
            :label="item.name" 
 | 
            :value="item.id"> 
 | 
          </el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item v-if="form.type==0||form.type==1" label="选项内容:" prop="remark"> 
 | 
        <el-input v-model="form.remark" placeholder="每个选项最多10个字,同时新建多个选项时,请用“空格”隔开" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="提示文字:" prop="tips"> 
 | 
        <el-input v-model="form.tips" placeholder="请输入提示文字" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="排序码:" prop="sortnum"> 
 | 
        <el-input v-model="form.sortnum" placeholder="请输入排序码,升序,只能输入数字" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="是否启用:" prop="status" > 
 | 
        <el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch> 
 | 
      </el-form-item> 
 | 
      <!-- <el-form-item label="是否必填:" prop="isRequired" > 
 | 
        <el-switch v-model="form.isRequired" :inactive-value="0" :active-value="1"></el-switch> 
 | 
      </el-form-item> --> 
 | 
    </el-form> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import { getDepartmentListByConditon } from '@/api/ext/departmentExt' 
 | 
import { productesGroup } from '@/api/ext/proceduresExt' 
 | 
export default { 
 | 
  name: 'OperaCheckAttrExtWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow }, 
 | 
   
 | 
  data () { 
 | 
    const valEndValue = (rule, value, callback) => { 
 | 
      if (this.form.remark === '' || this.form.remark === null) { 
 | 
        return callback(new Error('请输入选项类容')) 
 | 
      }  
 | 
      const array = this.form.remark.split(' ') 
 | 
      for (const item of array) { 
 | 
        if (item.length > 10) { 
 | 
          return callback(new Error('选项长度不能超过10')) 
 | 
        } 
 | 
      } 
 | 
      return callback() 
 | 
    } 
 | 
    return { 
 | 
      options: [ 
 | 
        // 0单选 1多选 2文本 3数字 4日期 
 | 
        { name: '单选', id: 0 }, 
 | 
        { name: '多选', id: 1 }, 
 | 
        { name: '文本', id: 2 }, 
 | 
        { name: '数字', id: 3 }, 
 | 
        { name: '日期', id: 4 } 
 | 
      ], 
 | 
      factoreis: [], 
 | 
      factory: null, 
 | 
      loading: false, 
 | 
      productes: [], 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        id: '', 
 | 
        remark: '', 
 | 
        procedureId: null, 
 | 
        type: null, 
 | 
        sortnum: '', 
 | 
        isRequired: 1, 
 | 
        status: 1, 
 | 
        tips: '', 
 | 
        name: '' 
 | 
      }, 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
        name: [ 
 | 
          { required: true, message: '请输入属性名称', trigger: 'blur' }, 
 | 
          { max: 20, message: '输入字数不超过20', trigger: 'blur' } 
 | 
        ], 
 | 
        procedureId: [{ required: true, message: '请选择工序', trigger: 'change' }], 
 | 
        type: [{ required: true, message: "请选择类型", trigger: 'change' }], 
 | 
        remark: [{ required: true, validator: valEndValue, trigger: 'change' }], 
 | 
        tips: [{ max: 10, message: '输入字数不超过10', trigger: 'blur' }], 
 | 
        sortnum: [{ pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'change' }] 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/ext/checkAttrExt', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
     
 | 
  }, 
 | 
  methods: { 
 | 
    visibleChange(e) { 
 | 
      if (e) { 
 | 
        this.loading = true 
 | 
        getDepartmentListByConditon({ 
 | 
          type: 1 
 | 
        }) 
 | 
          .then(res => { 
 | 
            // console.log(res) 
 | 
            this.factoreis = res 
 | 
            this.loading = false 
 | 
          }) 
 | 
          .catch(err => { 
 | 
            this.loading = false 
 | 
            console.log(err) 
 | 
          }) 
 | 
      } 
 | 
    }, 
 | 
    open (title, target) { 
 | 
      this.title = title 
 | 
      this.visibleChange(true) 
 | 
      this.visible = true 
 | 
      // 新建 
 | 
      if (target == null) { 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.form.resetFields() 
 | 
          this.factory = null 
 | 
          this.form.remark = null 
 | 
          this.$refs.form.clearValidate() 
 | 
          this.form[this.configData['field.id']] = null 
 | 
        }) 
 | 
        return 
 | 
      } 
 | 
      // 编辑 
 | 
      this.$nextTick(() => { 
 | 
        for (const key in this.form) { 
 | 
          this.form[key] = target[key] 
 | 
        } 
 | 
        this.factory = target.pmodel.orgId 
 | 
        this.getProcedure(target.pmodel.orgId) 
 | 
      }) 
 | 
    }, 
 | 
    selectFactory (v) { 
 | 
      // console.log(this.form.remark); 
 | 
      this.form.procedureId = null 
 | 
      this.getProcedure(v) 
 | 
    }, 
 | 
    getProcedure (v) { 
 | 
      productesGroup({ orgId: v }) 
 | 
        .then(res => { 
 | 
          this.productes = res 
 | 
        }) 
 | 
        .catch(err => { 
 | 
          console.log(err) 
 | 
        }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |