art: 班组管理 代码优化

zhangherong

3 天以前 c3cda9b9aa93609969e356c6e72ced75944e85cb

 src/views/base/modules/group/GroupModal.vue

@@ -4,6 +4,7 @@
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
@@ -11,42 +12,37 @@
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form"  v-bind="layout"  :model="model" :rules="validatorRules">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item label="班组编码" required prop="groupCode" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="model.groupCode" :disabled="roleDisabled"  placeholder="请输入班组编码"/>
          <a-input v-model="model.groupCode" :disabled="roleDisabled" placeholder="请输入班组编码" />
        </a-form-model-item>
        <a-form-model-item label="班组名称" required prop="groupName" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-model="model.groupName" placeholder="请输入班组名称"/>
          <a-input v-model="model.groupName" placeholder="请输入班组名称" />
        </a-form-model-item>
         <a-form-model-item label="班组长" prop="groupManager" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-model-item label="班组长" prop="groupManager" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-search-select-tag
            type="list"
            v-model="model.groupManager"
            :trigger-change="true"
            dict="sys_user,realname,id, del_flag='0' and status='1'"
            placeholder="请选择班组长"
          />
        </a-form-model-item>
        <a-form-model-item label="产线" prop="factoryId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag placeholder="请选择产线" v-model="model.factoryId"
                             dictCode="base_factory,factory_name,id,del_flag=0 and factory_category='3'"></j-dict-select-tag>
        </a-form-model-item>
        <a-form-model-item label="班次" prop="shiftId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag
                type="list"
                v-model="model.groupManager"
                :trigger-change="true"
                dictCode="sys_user,realname,id"
                placeholder="请选择班组长"
              />
        </a-form-model-item>
         <a-form-model-item label="产线" prop="factoryId" :labelCol="labelCol" :wrapperCol="wrapperCol">
         <j-select-factory
            v-model="model.factoryId"
            :multi="true"
            @back="backFactoryInfo"
            :backProduction="true"
            :treeProductOpera="true"
          ></j-select-factory>
        </a-form-model-item>
         <a-form-model-item label="班次" prop="shiftId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag
                type="list"
                v-model="model.shiftId"
                :trigger-change="true"
                dictCode="base_shift,shift_name,id"
                placeholder="请选择班次"
              />
            type="list"
            v-model="model.shiftId"
            :trigger-change="true"
            dictCode="base_shift,shift_name,id"
            placeholder="请选择班次"
          />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea :rows="5" v-model="model.remark" placeholder="请输入备注"/>
          <a-textarea :rows="5" v-model="model.remark" placeholder="请输入备注" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
@@ -54,130 +50,138 @@
</template>

<script>
  import {duplicateCheck } from '@/api/api'
  import {postAction,requestPut} from '@/api/manage'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JSelectFactory from '../../../../components/jeecgbiz/JSelectFactory'
  export default {
    name: "GroupModal",
    components: {
    JDictSelectTag,
    JSelectFactory
import { duplicateCheck } from '@/api/api'
import { postAction, requestPut } from '@/api/manage'
import JDictSelectTag from '@/components/dict/JDictSelectTag'

export default {
  name: 'GroupModal',
  components: {
    JDictSelectTag
  },
    data () {
      return {
        title:"操作",
        visible: false,
        roleDisabled: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules:{
          groupName: [
            { required: true, message: '请输入班组名称!' },
            { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
          ],
          groupCode: [
            { required: true, message: '请输入班组名称!'},
            { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
            { validator: this.validategroupCode}
          ],
          remark: [
            { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
          ]
        },
        url: {
          add: "/base/shiftGroup/add",
          edit: "/base/shiftGroup/edit",
        },
        nextFactoryOptions: [],
      }
  data() {
    return {
      title: '操作',
      visible: false,
      roleDisabled: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        groupName: [
          { required: true, message: '请输入班组名称!' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
        groupCode: [
          { required: true, message: '请输入班组名称!' },
          { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
          { validator: this.validategroupCode }
        ],
        factoryId: [
          { required: true, message: '请选择产线!' },
        ],
        groupManager: [
          { required: true, message: '请选择班组长!' },
        ],
        shiftId: [
          { required: true, message: '请选择班班次!' },
        ],
        remark: [
          { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
        ]
      },
      url: {
        add: '/base/shiftGroup/add',
        edit: '/base/shiftGroup/edit'
      },
      nextFactoryOptions: []
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$refs.form.clearValidate();
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if(!this.model.id){
              obj=postAction(this.url.add, this.model)
            }else{
              obj=requestPut(this.url.edit, this.model, {
                    id: this.model.id
                  })
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
    close() {
      this.$refs.form.clearValidate()
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let obj
          if (!this.model.id) {
            obj = postAction(this.url.add, this.model)
          } else {
            obj = requestPut(this.url.edit, this.model, {
              id: this.model.id
            })
          }else{
            return false;
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validategroupCode(rule, value, callback) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback('班组编码不可输入汉字!')
      } else {
        let params = {
          tableName: 'base_shift_group',
          fieldName: 'group_code',
          fieldVal: value,
          dataId: this.model.id
        }
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validategroupCode(rule, value, callback){
        if(/[\u4E00-\u9FA5]/g.test(value)){
          callback("班组编码不可输入汉字!");
        }else{
          let params = {
            tableName: "base_shift_group",
            fieldName: "group_code",
            fieldVal: value,
            dataId: this.model.id,
          };
          duplicateCheck(params).then((res)=>{
            if(res.success){
              callback();
            }else{
              callback(res.message);
            }
          });
        }
      },
      backFactoryInfo(info) {
        this.model.factoryIds = this.model.factoryId
        this.nextFactoryOptions = info.map((item, index, arr) => {
          let c = { label: item.text, value: item.value + '' }
          return c
        })
      },
      }
    },
    backFactoryInfo(info) {
      this.model.factoryIds = this.model.factoryId
      this.nextFactoryOptions = info.map((item, index, arr) => {
        let c = { label: item.text, value: item.value + '' }
        return c
      })
    }
  }
}
</script>

<style scoped>