Mr.Zhang
2023-08-11 622382942e20d2e17e3e2502131cbd4fe69103c9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<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>