vue版本上线

jshERP-web/src/views/material/MaterialCategoryList.vue

@@ -0,0 +1,487 @@
+<template>
+  <a-row :gutter="10">
+    <a-col :md="12" :sm="24">
+      <a-card :bordered="false">
+
+        <!-- 按钮操作区域 -->
+        <a-row style="margin-left: 14px">
+          <a-button @click="handleAdd()" type="primary">添加类别</a-button>
+          <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
+          <a-button @click="refresh" type="default" icon="reload">刷新</a-button>
+        </a-row>
+        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
+          <a-alert type="info" :showIcon="true">
+            <div slot="message">
+              当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
+              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
+            </div>
+          </a-alert>
+          <!-- 树-->
+          <a-col :md="10" :sm="24">
+            <template>
+              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
+               <span style="user-select: none">
+                <a-tree
+                  checkable
+                  multiple
+                  @select="onSelect"
+                  @check="onCheck"
+                  @rightClick="rightHandle"
+                  :selectedKeys="selectedKeys"
+                  :checkedKeys="checkedKeys"
+                  :treeData="categoryTree"
+                  :checkStrictly="checkStrictly"
+                  :expandedKeys="iExpandedKeys"
+                  :autoExpandParent="true"
+                  @expand="onExpand"/>
+                </span>
+              </a-dropdown>
+            </template>
+          </a-col>
+        </div>
+      </a-card>
+      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+      <div class="drawer-bootom-button">
+        <a-dropdown :trigger="['click']" placement="topCenter">
+          <a-menu slot="overlay">
+            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
+            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
+            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
+            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
+            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
+            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
+          </a-menu>
+          <a-button>
+            树操作 <a-icon type="up" />
+          </a-button>
+        </a-dropdown>
+      </div>
+      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+    </a-col>
+    <a-col :md="12" :sm="24">
+      <a-card :bordered="false" v-if="selectedKeys.length>0">
+        <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 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="treeData" v-model="model.parentId" placeholder="请选择上级目录">
+            </a-tree-select>
+          </a-form-item>
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+            <a-input-number 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>
+        <div class="anty-form-btn">
+          <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
+          <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
+        </div>
+      </a-card>
+      <a-card v-else >
+        <a-empty>
+          <span slot="description"> 请先选择一个类别! </span>
+        </a-empty>
+      </a-card>
+    </a-col>
+    <material-category-modal ref="materialCategoryModal" @ok="loadTree"></material-category-modal>
+  </a-row>
+</template>
+<script>
+import MaterialCategoryModal from '../material/modules/MaterialCategoryModal'
+import pick from 'lodash.pick'
+import {queryMaterialCategoryTreeList,queryMaterialCategoryById} from '@/api/api'
+import {httpAction, deleteAction} from '@/api/manage'
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+export default {
+  name: 'MaterialCategoryList',
+  mixins: [JeecgListMixin],
+  components: {
+    MaterialCategoryModal
+  },
+  data() {
+    return {
+      iExpandedKeys: [],
+      loading: false,
+      currFlowId: '',
+      currFlowName: '',
+      disable: true,
+      treeData: [],
+      visible: false,
+      categoryTree: [],
+      rightClickSelectedKey: '',
+      rightClickSelectedOrgCode: '',
+      hiding: true,
+      model: {},
+      dropTrigger: '',
+      category: {},
+      disableSubmit: false,
+      checkedKeys: [],
+      selectedKeys: [],
+      autoIncr: 1,
+      currSelected: {},
+      allTreeKeys:[],
+      checkStrictly: true,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 5}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 16}
+      },
+      graphDatasource: {
+        nodes: [],
+        edges: []
+      },
+      validatorRules:{
+        name: {rules: [{required: true, message: '请输入名称!'}]},
+        serialNo: {rules: [{required: true, message: '请输入编号!'}]}
+      },
+      url: {
+        delete: '/materialCategory/delete',
+        edit: '/materialCategory/update',
+        deleteBatch: '/materialCategory/deleteBatch'
+      },
+      orgCategoryDisabled:false,
+    }
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    }
+  },
+  methods: {
+    loadData() {
+      this.refresh();
+    },
+    loadTree() {
+      var that = this
+      that.treeData = []
+      that.categoryTree = []
+      let params = {};
+      params.id='';
+      queryMaterialCategoryTreeList(params).then((res) => {
+        if (res) {
+          //类别全选后，再添加类别，选中数量增多
+          this.allTreeKeys = [];
+          for (let i = 0; i < res.length; i++) {
+            let temp = res[i]
+            that.treeData.push(temp)
+            that.categoryTree.push(temp)
+            that.setThisExpandedKeys(temp)
+            that.getAllKeys(temp);
+            // console.log(temp.id)
+          }
+          this.loading = false
+        }
+      })
+    },
+    setThisExpandedKeys(node) {
+      if (node.children && node.children.length > 0) {
+        this.iExpandedKeys.push(node.key)
+        for (let a = 0; a < node.children.length; a++) {
+          this.setThisExpandedKeys(node.children[a])
+        }
+      }
+    },
+    refresh() {
+      this.loading = true
+      this.loadTree()
+    },
+    // 右键操作方法
+    rightHandle(node) {
+      this.dropTrigger = 'contextmenu'
+      console.log(node.node.eventKey)
+      this.rightClickSelectedKey = node.node.eventKey
+      this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
+    },
+    onExpand(expandedKeys) {
+      console.log('onExpand', expandedKeys)
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.iExpandedKeys = expandedKeys
+    },
+    backFlowList() {
+      this.$router.back(-1)
+    },
+    // 右键点击下拉框改变事件
+    dropStatus(visible) {
+      if (visible == false) {
+        this.dropTrigger = ''
+      }
+    },
+    // 右键店家下拉关闭下拉框
+    closeDrop() {
+      this.dropTrigger = ''
+    },
+    addRootNode() {
+      this.$refs.nodeModal.add(this.currFlowId, '')
+    },
+    batchDel: function () {
+      console.log(this.checkedKeys)
+      if (this.checkedKeys.length <= 0) {
+        this.$message.warning('请选择一条记录！')
+      } else {
+        var ids = ''
+        for (var a = 0; a < this.checkedKeys.length; a++) {
+          ids += this.checkedKeys[a] + ','
+        }
+        var that = this
+        this.$confirm({
+          title: '确认删除',
+          content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
+          onOk: function () {
+            deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
+              if (res.code == 200) {
+                that.$message.success(res.data.message)
+                that.loadTree()
+                that.onClearSelected()
+              } else {
+                that.$message.warning(res.data.message)
+              }
+            })
+          }
+        })
+      }
+    },
+    nodeModalOk() {
+      this.loadTree()
+    },
+    nodeModalClose() {
+    },
+    hide() {
+      console.log(111)
+      this.visible = false
+    },
+    onCheck(checkedKeys, info) {
+      console.log('onCheck', checkedKeys, info)
+      this.hiding = false
+      //this.checkedKeys = checkedKeys.checked
+      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+      if(this.checkStrictly){
+        this.checkedKeys = checkedKeys.checked;
+      }else{
+        this.checkedKeys = checkedKeys
+      }
+      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+    },
+    onSelect(selectedKeys, e) {
+      console.log('selected', selectedKeys, e)
+      this.hiding = false
+      let record = e.node.dataRef
+      let params = {};
+      params.id=record.id;
+      queryMaterialCategoryById(params).then((res) => {
+        if (res && res.code == 200) {
+          if(res.data){
+            record.name = res.data.name;
+            record.serialNo = res.data.serialNo;
+            record.parentId = res.data.parentId;
+            record.sort = res.data.sort;
+            record.remark = res.data.remark;
+            console.log('onSelect-record', record)
+            this.currSelected = Object.assign({}, record)
+            this.model = this.currSelected
+            this.selectedKeys = [record.key]
+            this.model.parentId = record.parentId
+            this.setValuesToForm(record)
+          }
+        }
+      });
+    },
+    // 触发onSelect事件时,为类别树右侧的form表单赋值
+    setValuesToForm(record) {
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(record, 'name','serialNo', 'parentId', 'sort', 'remark'))
+      })
+    },
+    getCurrSelectedTitle() {
+      return !this.currSelected.title ? '' : this.currSelected.title
+    },
+    onClearSelected() {
+      this.hiding = true
+      this.checkedKeys = []
+      this.currSelected = {}
+      this.form.resetFields()
+      this.selectedKeys = []
+    },
+    handleNodeTypeChange(val) {
+      this.currSelected.nodeType = val
+    },
+    notifyTriggerTypeChange(value) {
+      this.currSelected.notifyTriggerType = value
+    },
+    receiptTriggerTypeChange(value) {
+      this.currSelected.receiptTriggerType = value
+    },
+    submitCurrForm() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (!this.currSelected.id) {
+            this.$message.warning('请点击选择要修改类别!')
+            return
+          }
+
+          let formData = Object.assign(this.currSelected, values)
+          console.log('Received values of form: ', formData)
+          httpAction(this.url.edit, formData, 'put').then((res) => {
+            if (res.code == 200) {
+              this.$message.success('保存成功!')
+              this.loadTree()
+            } else {
+              this.$message.error(res.message)
+            }
+          })
+        }
+      })
+    },
+    emptyCurrForm() {
+      this.form.resetFields()
+    },
+    nodeSettingFormSubmit() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+    openSelect() {
+      this.$refs.sysDirectiveModal.show()
+    },
+    handleAdd() {
+      this.$refs.materialCategoryModal.add()
+      this.$refs.materialCategoryModal.title = '新增'
+    },
+    selectDirectiveOk(record) {
+      console.log('选中指令数据', record)
+      this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
+      this.currSelected.sysCode = record.sysCode
+    },
+    getFlowGraphData(node) {
+      this.graphDatasource.nodes.push({
+        id: node.id,
+        text: node.flowNodeName
+      })
+      if (node.children.length > 0) {
+        for (let a = 0; a < node.children.length; a++) {
+          let temp = node.children[a]
+          this.graphDatasource.edges.push({
+            source: node.id,
+            target: temp.id
+          })
+          this.getFlowGraphData(temp)
+        }
+      }
+    },
+    // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+    expandAll () {
+      this.iExpandedKeys = this.allTreeKeys
+    },
+    closeAll () {
+      this.iExpandedKeys = []
+    },
+    checkALL () {
+      this.checkStriccheckStrictlytly = false
+      this.checkedKeys = this.allTreeKeys
+    },
+    cancelCheckALL () {
+      //this.checkedKeys = this.defaultCheckedKeys
+      this.checkedKeys = []
+    },
+    switchCheckStrictly (v) {
+      if(v==1){
+        this.checkStrictly = false
+      }else if(v==2){
+        this.checkStrictly = true
+      }
+    },
+    getAllKeys(node) {
+      // console.log('node',node);
+      this.allTreeKeys.push(node.key)
+      if (node.children && node.children.length > 0) {
+        for (let a = 0; a < node.children.length; a++) {
+          this.getAllKeys(node.children[a])
+        }
+      }
+    }
+    // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
+
+  },
+  created() {
+    this.currFlowId = this.$route.params.id
+    this.currFlowName = this.$route.params.name
+    // this.loadTree()
+  },
+
+}
+</script>
+<style scoped>
+.ant-card-body .table-operator {
+  margin: 15px;
+}
+
+.anty-form-btn {
+  width: 100%;
+  text-align: center;
+}
+
+.anty-form-btn button {
+  margin: 0 5px;
+}
+
+.anty-node-layout .ant-layout-header {
+  padding-right: 0
+}
+
+.header {
+  padding: 0 8px;
+}
+
+.header button {
+  margin: 0 3px
+}
+
+.ant-modal-cust-warp {
+  height: 100%
+}
+
+.ant-modal-cust-warp .ant-modal-body {
+  height: calc(100% - 110px) !important;
+  overflow-y: auto
+}
+
+.ant-modal-cust-warp .ant-modal-content {
+  height: 90% !important;
+  overflow-y: hidden
+}
+
+#app .desktop {
+  height: auto !important;
+}
+
+/** Button按钮间距 */
+.ant-btn {
+  margin-left: 3px
+}
+
+.drawer-bootom-button {
+  /*position: absolute;*/
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: left;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+}
+</style>

jshERP-web/src/views/material/MaterialList.vue

@@ -0,0 +1,235 @@
+<template>
+  <a-card :bordered="false" class="card-area">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <!-- 搜索区域 -->
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类别">
+              <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
+               :treeData="categoryTree" v-model="queryParam.categoryId" placeholder="请选择类别">
+              </a-tree-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="条码" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-input placeholder="请输入条码查询" v-model="queryParam.barCode"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="规格" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+                <a-input placeholder="请输入规格查询" v-model="queryParam.standard"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="型号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+                <a-input placeholder="请输入型号查询" v-model="queryParam.model"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="searchQuery">查询</a-button>
+              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 操作按钮区域 -->
+    <div class="table-operator"  style="margin-top: 5px">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-popover title="表格模板">
+          <template slot="content">
+            <p><a target="_blank" href="/doc/goods_template.xls"><b>商品Excel模板下载</b></a></p>
+          </template>
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-popover>
+      </a-upload>
+      <a-button type="primary" icon="download" @click="handleExportXls('商品信息')">导出</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+          <a-menu-item key="2" @click="batchSetStatus(true)"><a-icon type="check-square"/>启用</a-menu-item>
+          <a-menu-item key="3" @click="batchSetStatus(false)"><a-icon type="close-square"/>禁用</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :scroll="{ x: 1500, y: 500 }"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+            <a>删除</a>
+          </a-popconfirm>
+        </span>
+        <template slot="customRenderEnabled" slot-scope="enabled">
+          <a-tag v-if="enabled" color="green">启用</a-tag>
+          <a-tag v-if="!enabled" color="orange">禁用</a-tag>
+        </template>
+        <template slot="customRenderEnableSerialNumber" slot-scope="enableSerialNumber">
+          <a-tag v-if="enableSerialNumber==1" color="green">有</a-tag>
+          <a-tag v-if="enableSerialNumber==0" color="orange">无</a-tag>
+        </template>
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+    <!-- 表单区域 -->
+    <material-modal ref="modalForm" @ok="modalFormOk"></material-modal>
+  </a-card>
+</template>
+<script>
+  import MaterialModal from './modules/MaterialModal'
+  import {queryMaterialCategoryTreeList,queryMaterialCategoryById} from '@/api/api'
+  import { getAction } from '@/api/manage'
+  import { getMpListShort } from "@/utils/util"
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import JDate from '@/components/jeecg/JDate'
+  import Vue from 'vue'
+  export default {
+    name: "MaterialList",
+    mixins:[JeecgListMixin],
+    components: {
+      MaterialModal,
+      JDate
+    },
+    data () {
+      return {
+        categoryTree:[],
+        mPropertyListShort: '',
+        model: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        // 查询条件
+        queryParam: {
+          categoryId:'',
+          barCode:'',
+          name:'',
+          standard:'',
+          model:'',
+          mpList: getMpListShort(Vue.ls.get('materialPropertyList'))  //扩展属性
+        },
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key:'rowIndex',
+            width:40,
+            align:"center",
+            fixed: 'left',
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+          },
+          {title: '条码', dataIndex: 'mBarCode', width: 120,fixed: 'left'},
+          {title: '名称', dataIndex: 'name', width: 120},
+          {title: '规格', dataIndex: 'standard', width: 80},
+          {title: '型号', dataIndex: 'model', width: 80},
+          {title: '颜色', dataIndex: 'color', width: 50},
+          {title: '类别', dataIndex: 'categoryName', width: 80},
+          {title: '扩展信息', dataIndex: 'materialOther', width: 100},
+          {
+            title: '单位', dataIndex: 'unit', width: 100, customRender: function (text, record, index) {
+              if(text) {
+                return text;
+              } else {
+                return record.unitName;
+              }
+            }
+          },
+          {title: '安全存量', dataIndex: 'safetyStock', width: 80},
+          {title: '库存', dataIndex: 'stock', width: 70},
+          {title: '采购价', dataIndex: 'purchaseDecimal', width: 70},
+          {title: '零售价', dataIndex: 'commodityDecimal', width: 70},
+          {title: '销售价', dataIndex: 'wholesaleDecimal', width: 70},
+          {title: '最低售价', dataIndex: 'lowDecimal', width: 80},
+          {title: '状态', dataIndex: 'enabled', width: 60, align: "center",
+            scopedSlots: { customRender: 'customRenderEnabled' }
+          },
+          {title: '序列号', dataIndex: 'enableSerialNumber', width: 60, align: "center",
+            scopedSlots: { customRender: 'customRenderEnableSerialNumber' }
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align:"center",
+            width: 100,
+            fixed: 'right',
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        url: {
+          list: "/material/list",
+          delete: "/material/delete",
+          deleteBatch: "/material/deleteBatch",
+          importExcelUrl: "/material/importExcel",
+          exportXlsUrl: "/material/exportExcel",
+          batchSetStatusUrl: "/material/batchSetStatus"
+        }
+      }
+    },
+    created() {
+      this.model = Object.assign({}, {});
+      this.loadTreeData();
+    },
+    computed: {
+      importExcelUrl: function () {
+        return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`;
+      }
+    },
+    methods: {
+      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);
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

jshERP-web/src/views/material/MaterialPropertyList.vue

@@ -0,0 +1,107 @@
+<template>
+  <a-card :bordered="false" class="card-area">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <!-- 搜索区域 -->
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-input placeholder="请输入名称查询" v-model="queryParam.name"></a-input>
+            </a-form-item>
+          </a-col>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="searchQuery">查询</a-button>
+              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- table区域-begin -->
+    <div>
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange">
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+        </span>
+        <!-- 状态渲染模板 -->
+        <template slot="customRenderFlag" slot-scope="enabled">
+          <a-tag v-if="enabled==1" color="green">启用</a-tag>
+          <a-tag v-if="enabled==0" color="orange">禁用</a-tag>
+        </template>
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+    <!-- 表单区域 -->
+    <material-property-modal ref="modalForm" @ok="modalFormOk"></material-property-modal>
+  </a-card>
+</template>
+<script>
+  import MaterialPropertyModal from './modules/MaterialPropertyModal'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import JDate from '@/components/jeecg/JDate'
+  export default {
+    name: "MaterialPropertyList",
+    mixins:[JeecgListMixin],
+    components: {
+      MaterialPropertyModal,
+      JDate
+    },
+    data () {
+      return {
+        // 查询条件
+        queryParam: {name:'',type:''},
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key:'rowIndex',
+            width:40,
+            align:"center",
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+          },
+          {title: '名称', dataIndex: 'nativeName', width: 100},
+          {
+            title: '是否启用', dataIndex: 'enabled', width: 100, align: "center",
+            scopedSlots: { customRender: 'customRenderFlag' }
+          },
+          {title: '排序', dataIndex: 'sort', width: 100},
+          {title: '别名', dataIndex: 'anotherName', width: 100},
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align:"center",
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        url: {
+          list: "/materialProperty/list",
+          delete: "/materialProperty/delete",
+          deleteBatch: "/materialProperty/deleteBatch"
+        }
+      }
+    },
+    computed: {
+
+    },
+    methods: {
+
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :ok=false
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :okButtonProps="{ props: {disabled: disableSubmit} }"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+    <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 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-model="model.parentId" placeholder="请选择上级目录">
+          </a-tree-select>
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+          <a-input-number 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>
+</template>
+
+<script>
+  import { httpAction } from '@/api/manage'
+  import { queryMaterialCategoryTreeList } from '@/api/api'
+  import pick from 'lodash.pick'
+  import ATextarea from 'ant-design-vue/es/input/TextArea'
+  export default {
+    name: "MaterialCategoryModal",
+    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: '请输入名称!'}]},
+          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, 'orgFullName','orgAbr', 'orgNo', '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()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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>

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

@@ -0,0 +1,117 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:20%;height: 70%;overflow-y: hidden">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
+          <a-input placeholder="请输入名称" v-decorator.trim="[ 'nativeName' ]" :readOnly="model.id"/>
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否启用">
+          <a-switch checked-children="启用" un-checked-children="禁用" v-model="enabledSwitch" @change="onChange"></a-switch>
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
+          <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort', validatorRules.sort]" />
+        </a-form-item>
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="别名">
+          <a-input placeholder="请输入别名" v-decorator.trim="[ 'anotherName' ]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+  import pick from 'lodash.pick'
+  import {editMaterialProperty } from '@/api/api'
+  export default {
+    name: "MaterialPropertyModal",
+    data () {
+      return {
+        title:"操作",
+        visible: false,
+        model: {},
+        enabledSwitch: 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: '请输入名称!' },
+              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
+            ]
+          }
+        },
+      }
+    },
+    created () {
+    },
+    methods: {
+      onChange(checked) {
+        this.model.enabled = checked
+      },
+      add () {
+        this.edit({});
+      },
+      edit (record) {
+        this.form.resetFields();
+        this.model = Object.assign({}, record);
+        this.visible = true;
+        if(record.enabled!=null){
+          this.enabledSwitch = record.enabled?true:false;
+        }
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.model,'nativeName', 'enabled', 'sort', 'anotherName'))
+        });
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        const that = this;
+        // 触发表单验证
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            that.confirmLoading = true;
+            let formData = Object.assign(this.model, values);
+            let obj;
+            if(this.model.id){
+              obj=editMaterialProperty(formData);
+            }
+            obj.then((res)=>{
+              if(res.code === 200){
+                that.$emit('ok');
+              }else{
+                that.$message.warning(res.data.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+          }
+        })
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>
+<style scoped>
+
+</style>