mt-ck-wms-ui/src/views/art/components/add-dialog.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="25%"
    :visible="visible"
    :destroy-on-close="true"
    :before-close="() => $emit('on-close')"
    :title="id ? 'btn.edit' : 'btn.add' | i18nFilter"
    :class="$style.dialog"
  >
    <el-form ref="obj" :model="obj" :rules="rules" label-width="140px">
      <el-form-item :label="$t('module.art.artName')" prop="name">
        <el-input v-model="obj.name" />
      </el-form-item>
      <el-form-item :label="$t('module.art.externalCode')" prop="externalCode">
        <el-input v-model="obj.code" />
      </el-form-item>
      <!-- <el-form-item :label="$t('module.art.substrateType')" prop="substrateId">
        <el-select
          v-model="obj.substrateId"
          :class="$style.select"
          filterable
          clearable
          :placeholder="'placeholder.select' | i18nFilter"
        >
          <el-option
            v-for="item in substrateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item v-if="false" :label="$t('module.art.artBOM')" prop="bomId">
        <el-select
          v-model="obj.bomId"
          :class="$style.select"
          filterable
          clearable
          :placeholder="'placeholder.select' | i18nFilter"
        >
          <el-option
            v-for="item in bomList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('module.art.description')" prop="description">
        <el-input v-model="obj.description" />
      </el-form-item>
      <el-form-item :label="$t('module.art.remark')" prop="remark">
        <el-input v-model="obj.remark" />
      </el-form-item>
      <SubmitBar
        @on-cancle="$emit('on-close')"
        @on-submit="handleSubmit('obj')"
      />
    </el-form>
  </el-dialog>
</template>

<script>
import { add, update, getInfo, listBom, getCode } from '@/api/art-manage/art.js'
import SubmitBar from '@/views/art/components/submit-bar'

export default {
  name: 'AddDialog',
  components: {
    SubmitBar
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      obj: {
        name: '',
        code: '',
        remark: '',
        description: '',
        substrateId: '',
        bomId: ''
      },
      bomList: [],
      rules: {
        name: [
          { required: true, message: this.$t('module.art.artName') + this.$t('module.art.notNull'), trigger: 'blur' },
          { min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
        ],
        // externalCode: [
        //   { required: true, message: this.$t('module.art.externalCode') + this.$t('module.art.notNull'), trigger: 'blur' },
        //   { min: 3, message: this.$t('module.art.lengthRule'), trigger: 'blur' }
        // ],
        // substrateId: [
        //   {
        //     required: true,
        //     message: this.$t('module.art.selectNotNull') + this.$t('module.art.substrateType'),
        //     trigger: 'change'
        //   }
        // ],
        bomId: [
          {
            required: true,
            message: this.$t('module.art.selectNotNull') + this.$t('module.art.artBOM'),
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    id(val) {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: async function() {
      if (this.bomList.length === 0) {
        const bomRes = await listBom()
        this.bomList = bomRes.data
      }
      if (this.id) {
        const res = await getInfo({ id: this.id })
        this.obj = res.data
      } else {
        const result = await getCode()
        this.obj = {
          name: '',
          code: result.data,
          remark: '',
          description: '',
          substrateId: '',
          bomId: ''
        }
      }
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }
        console.log(this.obj)
        if (this.id) {
          update(this.obj).then(res => {
            this.$emit('on-success')
          })
        } else {
          add(this.obj).then(res => {
            this.$emit('on-success')
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" module>
.dialog {
  .input {
    display: flex;
    margin: 8px 16px 8px 4px;
    align-items: center;
    .select {
      width: 100%;
    }
  }
  .select {
    width: 100%;
  }
}
</style>