vue版本上线

jshERP-web/src/views/material/modules/MaterialModal.vue

@@ -0,0 +1,490 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="1000"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:5%;height: 100%;overflow-y: hidden">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-tabs default-active-key="1">
+          <a-tab-pane key="1" tab="基本信息" forceRender>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
+                  <a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规格">
+                  <a-input placeholder="请输入规格" v-decorator.trim="[ 'standard' ]" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位">
+                  <a-row class="form-row" :gutter="24">
+                    <a-col :lg="13" :md="13" :sm="24">
+                      <a-input placeholder="输入单位" :hidden="unitStatus" v-decorator.trim="[ 'unit' ]" />
+                      <a-select :value="unitList" placeholder="选择单位" v-decorator="[ 'unitId' ]"
+                                :hidden="manyUnitStatus" :dropdownMatchSelectWidth="false">
+                        <a-select-option v-for="(item,index) in unitList"
+                          :key="index" :value="item.id">
+                          {{ item.name }}
+                        </a-select-option>
+                      </a-select>
+                    </a-col>
+                    <a-col :lg="11" :md="11" :sm="24">
+                      <a-checkbox :checked="unitChecked" @change="unitOnChange">多单位</a-checkbox>
+                    </a-col>
+                  </a-row>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="型号">
+                  <a-input placeholder="请输入型号" v-decorator.trim="[ 'model' ]" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="颜色">
+                  <a-input placeholder="请输入颜色" v-decorator.trim="[ 'color' ]" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类别">
+                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
+                   :treeData="categoryTree" v-decorator="[ 'categoryId' ]" placeholder="请选择类别">
+                  </a-tree-select>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
+                  <a-select placeholder="请选择序列号" v-decorator="[ 'enableSerialNumber' ]">
+                    <a-select-option value="1">有</a-select-option>
+                    <a-select-option value="0">无</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="安全存量">
+                  <a-input placeholder="请输入安全存量" v-decorator.trim="[ 'safetyStock' ]" />
+                </a-form-item>
+              </a-col>
+              <a-col :lg="8" :md="12" :sm="24">
+              </a-col>
+            </a-row>
+            <j-editable-table
+              ref="editableMeTable"
+              :loading="meTable.loading"
+              :columns="meTable.columns"
+              :dataSource="meTable.dataSource"
+              :maxHeight="300"
+              :rowNumber="true"
+              :rowSelection="true"
+              :actionButton="true"/>
+            <a-row class="form-row" :gutter="24">
+              <a-col :lg="24" :md="24" :sm="24">
+                <a-form-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 }}" label="">
+                  <a-textarea :rows="2" placeholder="请输入备注" v-decorator="[ 'remark' ]" style="margin-top:8px;"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="扩展信息" forceRender>
+            <a-row v-if="mpShort.mfrs.enabled" class="form-row" :gutter="24">
+              <a-col :lg="8" :md="8" :sm="8">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.mfrs.name">
+                  <a-input v-decorator.trim="[ 'mfrs' ]" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-if="mpShort.otherField1.enabled" class="form-row" :gutter="24">
+              <a-col :lg="8" :md="8" :sm="8">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField1.name">
+                  <a-input v-decorator.trim="[ 'otherField1' ]" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-if="mpShort.otherField2.enabled" class="form-row" :gutter="24">
+              <a-col :lg="8" :md="8" :sm="8">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField2.name">
+                  <a-input v-decorator.trim="[ 'otherField2' ]" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-if="mpShort.otherField3.enabled" class="form-row" :gutter="24">
+              <a-col :lg="8" :md="8" :sm="8">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="mpShort.otherField3.name">
+                  <a-input v-decorator.trim="[ 'otherField3' ]" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="初始库存" forceRender>
+            <j-editable-table
+              ref="editableDepotTable"
+              :loading="depotTable.loading"
+              :columns="depotTable.columns"
+              :dataSource="depotTable.dataSource"
+              :maxHeight="300"
+              :rowNumber="true"
+              :rowSelection="false"
+              :actionButton="false"/>
+          </a-tab-pane>
+        </a-tabs>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+  import pick from 'lodash.pick'
+  import JEditableTable from '@/components/jeecg/JEditableTable'
+  import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
+  import {queryMaterialCategoryTreeList,addMaterial,editMaterial,checkMaterial} from '@/api/api'
+  import { httpAction, getAction } from '@/api/manage'
+  import JDate from '@/components/jeecg/JDate'
+  import Vue from 'vue'
+  export default {
+    name: "MaterialModal",
+    components: {
+      JDate, JEditableTable
+    },
+    data () {
+      return {
+        title:"操作",
+        visible: false,
+        categoryTree: [],
+        unitList: [],
+        depotList: [],
+        unitStatus: false,
+        manyUnitStatus: true,
+        unitChecked: false,
+        model: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 8 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        mpShort: {
+          mfrs: {},
+          otherField1: {},
+          otherField2: {},
+          otherField3: {}
+        },
+        meTable: {
+          loading: false,
+          dataSource: [],
+          columns: [
+            {
+              title: '条码',
+              key: 'barCode',
+              width: '30%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}',
+              validateRules: [{ required: true, message: '${title}不能为空' }]
+            },
+            {
+              title: '单位',
+              key: 'commodityUnit',
+              width: '12%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            },
+            {
+              title: '采购价',
+              key: 'purchaseDecimal',
+              width: '12%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            },
+            {
+              title: '零售价',
+              key: 'commodityDecimal',
+              width: '12%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            },
+            {
+              title: '销售价',
+              key: 'wholesaleDecimal',
+              width: '12%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            },
+            {
+              title: '最低售价',
+              key: 'lowDecimal',
+              width: '12%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            }
+          ]
+        },
+        depotTable: {
+          loading: false,
+          dataSource: [],
+          columns: [
+            {
+              title: '仓库',
+              key: 'name',
+              width: '15%',
+              type: FormTypes.normal
+            },
+            {
+              title: '库存数量',
+              key: 'initStock',
+              width: '15%',
+              type: FormTypes.input,
+              defaultValue: '',
+              placeholder: '请输入${title}'
+            }
+          ]
+        },
+        confirmLoading: false,
+        form: this.$form.createForm(this),
+        validatorRules:{
+          name:{
+            rules: [
+              { required: true, message: '请输入名称!' },
+              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
+              { validator: this.validateMaterialName}
+            ]
+          }
+        },
+        url: {
+          add: '/material/add',
+          edit: '/material/update',
+          materialsExtendList: '/materialsExtend/getDetailList',
+          depotWithStock: '/depot/getAllListWithStock'
+        }
+      }
+    },
+    created () {
+      this.loadTreeData();
+      this.loadUnitListData();
+      this.loadParseMaterialProperty();
+    },
+    methods: {
+      // 获取所有的editableTable实例
+      getAllTable() {
+        return Promise.all([
+          getRefPromise(this, 'editableMeTable'),
+          getRefPromise(this, 'editableDepotTable')
+        ])
+      },
+      add () {
+        // 默认新增一条数据
+        this.getAllTable().then(editableTables => {
+          editableTables[0].add()
+        })
+        this.edit({});
+      },
+      edit (record) {
+        this.form.resetFields();
+        this.model = Object.assign({}, record);
+        this.activeKey = '1'
+        this.visible = true;
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model, 'name', 'standard', 'unit', 'unitId', 'model', 'color',
+            'categoryId','enableSerialNumber','safetyStock','remark','mfrs','otherField1','otherField2','otherField3'))
+        });
+        // 加载子表数据
+        if (this.model.id) {
+          // 判断是否是多单位
+          if(this.model.unit){
+            this.unitChecked = false
+            this.unitStatus = false
+            this.manyUnitStatus = true
+          } else {
+            this.unitChecked = true
+            this.unitStatus = true
+            this.manyUnitStatus = false
+          }
+          let params = { materialId: this.model.id }
+          this.requestMeTableData(this.url.materialsExtendList, params, this.meTable)
+          this.requestDepotTableData(this.url.depotWithStock, { mId: this.model.id }, this.depotTable)
+        } else {
+          this.requestDepotTableData(this.url.depotWithStock, { mId: 0 }, this.depotTable)
+        }
+      },
+      /** 查询条码tab的数据 */
+      requestMeTableData(url, params, tab) {
+        tab.loading = true
+        getAction(url, params).then(res => {
+          tab.dataSource = res.data.rows || []
+        }).finally(() => {
+          tab.loading = false
+        })
+      },
+      /** 查询仓库tab的数据 */
+      requestDepotTableData(url, params, tab) {
+        tab.loading = true
+        getAction(url, params).then(res => {
+          tab.dataSource = res.data || []
+        }).finally(() => {
+          tab.loading = false
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false
+        this.unitStatus = false
+        this.manyUnitStatus = true
+        this.unitChecked = false
+        this.getAllTable().then(editableTables => {
+          editableTables[0].initialize()
+          editableTables[1].initialize()
+        })
+      },
+      handleOk () {
+        this.validateFields()
+      },
+      handleCancel () {
+        this.close()
+      },
+      /** 触发表单验证 */
+      validateFields() {
+        this.getAllTable().then(tables => {
+          /** 一次性验证主表和所有的次表 */
+          return validateFormAndTables(this.form, tables)
+        }).then(allValues => {
+          let formData = this.classifyIntoFormData(allValues)
+          formData.sortList = [];
+          if(this.unitChecked){
+            formData.unit = ''
+          } else {
+            formData.unitId = ''
+          }
+          // 发起请求
+          return this.requestAddOrEdit(formData)
+        }).catch(e => {
+          if (e.error === VALIDATE_NO_PASSED) {
+            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
+            this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
+          } else {
+            console.error(e)
+          }
+        })
+      },
+      /** 整理成formData */
+      classifyIntoFormData(allValues) {
+        let materialMain = Object.assign(this.model, allValues.formValue)
+        return {
+          ...materialMain, // 展开
+          meList: allValues.tablesValue[0].values,
+          stock: allValues.tablesValue[1].values,
+        }
+      },
+      /** 发起新增或修改的请求 */
+      requestAddOrEdit(formData) {
+        let url = this.url.add, method = 'post'
+        if (this.model.id) {
+          url = this.url.edit
+          method = 'put'
+        }
+        const that = this;
+        this.confirmLoading = true
+        httpAction(url, formData, method).then((res) => {
+          if(res.code === 200){
+            that.$emit('ok');
+          }else{
+            that.$message.warning(res.data.message);
+          }
+        }).finally(() => {
+          that.confirmLoading = false
+          that.close();
+        })
+      },
+      validateMaterialName(rule, value, callback){
+        let params = {
+          name: value,
+          id: this.model.id?this.model.id:0
+        };
+        checkMaterial(params).then((res)=>{
+          if(res && res.code===200) {
+            if(!res.data.status){
+              callback();
+            } else {
+              callback("名称已经存在");
+            }
+          } else {
+            callback(res.data);
+          }
+        });
+      },
+      loadTreeData(){
+        let 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);
+            }
+          }
+        })
+      },
+      loadUnitListData(){
+        let that = this;
+        let params = {};
+        params.currentPage = 1;
+        params.pageSize = 100;
+        getAction('/unit/list', params).then((res) => {
+          if(res){
+            that.unitList = res.data.rows;
+          }
+        })
+      },
+      loadParseMaterialProperty() {
+        let mpList = Vue.ls.get('materialPropertyList')
+        for (let i = 0; i < mpList.length; i++) {
+          if (mpList[i].nativeName === "制造商") {
+            this.mpShort.mfrs.name = mpList[i].anotherName
+            this.mpShort.mfrs.enabled = mpList[i].enabled
+          }
+          if (mpList[i].nativeName === "自定义1") {
+            this.mpShort.otherField1.name = mpList[i].anotherName
+            this.mpShort.otherField1.enabled = mpList[i].enabled
+          }
+          if (mpList[i].nativeName === "自定义2") {
+            this.mpShort.otherField2.name = mpList[i].anotherName
+            this.mpShort.otherField2.enabled = mpList[i].enabled
+          }
+          if (mpList[i].nativeName === "自定义3") {
+            this.mpShort.otherField3.name = mpList[i].anotherName
+            this.mpShort.otherField3.enabled = mpList[i].enabled
+          }
+        }
+      },
+      unitOnChange (e) {
+        let isChecked = e.target.checked;
+        if(isChecked) {
+          this.unitStatus = true;
+          this.manyUnitStatus = false;
+          this.unitChecked = true;
+        } else {
+          this.unitStatus = false;
+          this.manyUnitStatus = true;
+          this.unitChecked = false;
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+
+</style>