jsh_erp/jshERP-web/src/views/material/modules/MaterialCategoryModal.vue

<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="800"
      :ok="false"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :okButtonProps="{ props: { disabled: disableSubmit } }"
      :getContainer="() => $refs.container"
      :maskStyle="{ top: '93px', left: '154px' }"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      style="top: 100px; height: 50%"
      cancelText="取消"
      okText="保存"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
            <a-input placeholder="请输入名称" v-decorator="['name', validatorRules.name]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="编号">
            <a-input disabled placeholder="请输入编号" v-decorator="['serialNo', validatorRules.serialNo]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级目录">
            <a-tree-select
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              allow-clear
              :treeDefaultExpandAll="true"
              :treeData="categoryTree"
              v-decorator="['parentId']"
              placeholder="请选择上级目录"
            >
            </a-tree-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
            <a-input v-decorator="['sort']" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
            <a-textarea placeholder="请输入备注" :rows="2" v-decorator.trim="['remark']" />
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { queryMaterialCategoryTreeList, checkMaterialCategory } from '@/api/api'
import pick from 'lodash.pick'
import ATextarea from 'ant-design-vue/es/input/TextArea'
export default {
  name: 'MaterialCategoryModal',
  mixins: [mixinDevice],
  components: { ATextarea },
  data() {
    return {
      categoryTree: [],
      orgTypeData: [],
      phoneWarning: '',
      departName: '',
      title: '操作',
      visible: false,
      disableSubmit: false,
      model: {},
      menuhidden: false,
      menuusing: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        name: {
          rules: [{ required: true, message: '请输入名称!' }, { validator: this.validateName }],
        },
        // serialNo: { rules: [{ required: true, message: '请输入编号!' }] },
      },
      url: {
        add: '/materialCategory/add',
      },
    }
  },
  created() {},
  methods: {
    loadTreeData() {
      var that = this
      let params = {}
      params.id = ''
      queryMaterialCategoryTreeList(params).then((res) => {
        if (res) {
          that.categoryTree = []
          for (let i = 0; i < res.length; i++) {
            let temp = res[i]
            that.categoryTree.push(temp)
          }
        }
      })
    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, {})
      this.visible = true
      this.loadTreeData()
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(record, 'name', 'serialNo', 'parentId', 'sort', 'remark'))
      })
    },
    close() {
      this.$emit('close')
      this.disableSubmit = false
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, values)
          //时间格式化
          console.log(formData)
          httpAction(this.url.add, formData, 'post')
            .then((res) => {
              if (res.code == 200) {
                that.$message.success(res.data.message)
                that.loadTreeData()
                that.$emit('ok')
              } else {
                that.$message.warning(res.data.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    validateName(rule, value, callback) {
      let params = {
        name: value,
        id: this.model.id ? this.model.id : 0,
      }
      checkMaterialCategory(params).then((res) => {
        if (res && res.code === 200) {
          if (!res.data.status) {
            callback()
          } else {
            callback('名称已经存在')
          }
        } else {
          callback(res.data)
        }
      })
    },
  },
}
</script>

<style scoped></style>