no message

src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryChargeManagement/index.vue

@@ -1,35 +1,26 @@
 <template>
   <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
     <template slot-scope="{ activeKey, data }">
-      <template-page
-        v-if="activeKey == 'list'"
-        ref="pageRef"
-        :get-list="getList"
-        :table-attributes="tableAttributes"
-        :table-events="tableEvents"
-        :options-evens-group="optionsEvensGroup"
-        :moreParameters="moreParameters"
-        :column-parsing="columnParsing"
-        :operation="operation()"
-        :exportList="exportList"
-        :operationColumnWidth="80"
-      >
+      <template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+        :table-events="tableEvents" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
+        :column-parsing="columnParsing" :operation="operation()" :exportList="exportList" :operationColumnWidth="80">
       </template-page>
       <div v-if="~['add', 'edit'].indexOf(activeKey)">
-        <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-          <zj-form-module
-            title=""
-            label-width="180px"
-            :showPackUp="false"
-            :form-data="formData"
-            :form-items="formItems"
-          >
-          </zj-form-module>
-        </zj-form-container>
-        <div slot="footer" class="dialog-footer">
+        <div style="box-sizing: border-box;padding: 20px">
+          <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+            <zj-form-module title="编辑" label-width="180px" :form-data="formData" :form-items="formItems">
+            </zj-form-module>
+            <zj-form-module v-if="formData.normType === 'M'" title="添加辅材" label-width="0px" :form-data="formData"
+              :form-items="formItems2">
+            </zj-form-module>
+          </zj-form-container>
+        </div>
+        <div slot="footer" style="box-sizing: border-box;padding-bottom: 20px; padding-right: 20px;text-align: right">
           <el-button size="mini" @click="data.removeTab()">取 消</el-button>
           <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
         </div>
+        <selectGoods v-if="formVisible" @close="close" @confirm="confirm"
+          :guolvList="(formData.items || []).map(item => item.workerGoodsId)" />
       </div>
     </template>
   </zj-tab-page>
@@ -53,8 +44,9 @@ import { materialCategoryTree } from '@/api/auxiliaryMaterialClass'
 import { getTypeList } from '@/api/auxiliaryFittings/attachmentProfile'
 import { commonTemplateDownload } from '@/api/common.js'
 import operation_mixin from '@/components/template/operation_mixin.js'
+import selectGoods from './selectGoods.vue'
 export default {
-  components: { TemplatePage },
+  components: { TemplatePage, selectGoods },
   mixins: [import_mixin, operation_mixin],
   data() {
     return {
@@ -93,7 +85,8 @@ export default {
         specification: '',
         status: 'ON',
         unit: '',
-        manualAmount: 0
+        manualAmount: 0,
+        items: []
       },
       partsUnitList: [],
       materialCategoryTree: [],
@@ -116,7 +109,7 @@ export default {
           [
             this.optionsEvensAuth(['imp', 'template'], {
               name: '导入物料',
-              click: () => {}
+              click: () => { }
             }),
             this.optionsEvensAuth('imp', ({ moduleName }) => {
               return {
@@ -144,7 +137,7 @@ export default {
           [
             this.optionsEvensAuth(['Import', 'downloadTemplate'], {
               name: '导入服务',
-              click: () => {}
+              click: () => { }
             }),
             this.optionsEvensAuth('Import', ({ moduleName }) => {
               return {
@@ -312,6 +305,11 @@ export default {
             label: '收费类型',
             prop: 'normType',
             rules: [...required]
+          },
+          events: {
+            change: () => {
+              this.formData.items = []
+            }
           }
         },
         {
@@ -457,7 +455,102 @@ export default {
           }
         }
       ]
-    }
+    },
+    formItems2() {
+      return [{
+        name: 'slot-component',
+        md: 24,
+        formItemAttributes: {
+          'label-width': '0px',
+          label: '',
+          prop: 'items',
+          rules: [...required]
+        },
+        render: (h, { props }) => {
+          return (
+            <div>
+              <div>
+                <el-button
+                  size="mini"
+                  type="primary"
+                  onClick={() => {
+                    this.formVisible = true
+                  }}
+                >
+                  新增
+                </el-button>
+              </div>
+              <zj-table columns={[{
+                columnAttributes: {
+                  label: '大类名称',
+                  prop: 'parentCategoryName',
+                }
+              },
+              {
+                columnAttributes: {
+                  label: '小类名称',
+                  prop: 'goodsCategoryName',
+                }
+              }, {
+                columnAttributes: {
+                  label: '辅材名称',
+                  prop: 'workerGoodsName',
+                }
+              }, {
+                columnAttributes: {
+                  label: '单位',
+                  prop: 'salesUnit',
+                }
+              }, {
+                columnAttributes: {
+                  label: '商品代码',
+                  prop: 'goodsCode',
+                }
+              }, {
+                columnAttributes: {
+                  label: '数量',
+                  prop: 'qty',
+                  width: 150
+                },
+                render: (h, { row, column, index }) => {
+                  return (
+                    <div style="padding: 0 10px">
+                      <el-input
+                        value={row[column.columnAttributes.prop]}
+                        onInput={val => {
+                          row[column.columnAttributes.prop] = val
+                        }}
+                        placeholder="请输入内容"
+                      ></el-input>
+                    </div>
+                  )
+                }
+              }, {
+                columnAttributes: {
+                  label: '操作',
+                  prop: '',
+                },
+                render: (h, { row, column, index }) => {
+                  return (
+                    <div style="padding: 0 10px">
+                      <el-button
+                        size="mini"
+                        type="text"
+                        onClick={() => {
+                          this.formData.items.splice(index, 1)
+                        }}
+                      >
+                        删除
+                      </el-button>
+                    </div>
+                  )
+                }
+              }]} table-data={this.formData.items || []} />
+            </div>
+          )
+        }
+      }]
+    },
   },
   methods: {
     // 列表请求函数
@@ -482,7 +575,7 @@ export default {
         }
       })
     },
-    openForm() {},
+    openForm() { },
     openForm(type, id) {
       this.$refs.tabPage.addTab({
         // 对应显示的模块
@@ -496,7 +589,6 @@ export default {
           this.formCancel()
           this.$nextTick(() => {
             this.formType = type
-            this.formVisible = true
             Promise.all([
               getTypeList({
                 pageNum: 1,
@@ -555,7 +647,26 @@ export default {
     },
     setNumber(val) {
       return Number(val.toFixed(2))
-    }
+    },
+    close() {
+      this.formVisible = false
+    },
+    confirm(data) {
+      data.filter(val => !~this.formData.items.map(item => item.workerGoodsId).indexOf(val.goodsId)).map(item => {
+        this.formData.items.push({
+          "goodsCategoryId": item.categoryId,
+          "goodsCategoryName": item.categoryName,
+          "goodsCode": item.goodsCode,
+          "salesUnit": item.salesUnit,
+          "parentCategoryId": item.parentCategoryId,
+          "parentCategoryName": item.parentCategoryName,
+          "workerGoodsId": item.goodsId,
+          "workerGoodsName": item.goodsName,
+          "qty": ""
+        })
+      })
+      this.close()
+    },
   }
 }
 </script>

src/views/auxiliaryFittings/auxiliaryDataManagement/auxiliaryChargeManagement/selectGoods.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-dialog width="980px" title="商品列表" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false"
+    @close="$emit('close')">
+    <div class="screen-container">
+      <el-form ref="tableScreenForm" :model="tableScreenForm" label-width="70px" size="small" label-position="left">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="8" :lg="8">
+            <el-form-item label="辅材编号" prop="goodsId">
+              <el-input v-model="tableScreenForm.goodsId" placeholder="辅材编号" size="small" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+            <el-form-item label="辅材名称" prop="goodsName">
+              <el-input v-model="tableScreenForm.goodsName" placeholder="辅材名称" size="small" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+            <el-form-item label="辅材小类" prop="categoryId">
+              <el-cascader v-model="tableScreenForm.categoryId" placeholder="辅材小类" size="small" :show-all-levels="false"
+                clearable
+                :props="{ options: materialCategoryTree, value: 'categoryId', label: 'categoryName', children: 'child', emitPath: false }">
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+            <el-form-item label="商品代码" prop="goodsCode">
+              <el-input v-model="tableScreenForm.goodsCode" placeholder="商品代码" size="small" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8">
+            <el-form-item label="规格型号" prop="goodsSpecification">
+              <el-input v-model="tableScreenForm.goodsSpecification" placeholder="规格型号" size="small" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="8" :lg="8" class="tr">
+            <el-form-item label="">
+              <el-button size="small" type="primary" @click="getGoodsListByScreen">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <el-table ref="goodsTable" :data="goodsList" :row-key="getRowKeys" height="350" size="mini" border
+      header-cell-class-name="headerRowColor" style="width: 100%" @selection-change="handleChooseGoods">
+      <el-table-column type="selection" width="55" :reserve-selection="true" :selectable="selectable" />
+      <el-table-column prop="parentCategoryName" label="大类类名称" />
+      <el-table-column prop="categoryName" label="小类名称" />
+      <el-table-column prop="goodsName" label="辅材名称" />
+      <el-table-column prop="goodsStockUnit" label="单位" />
+      <el-table-column prop="goodsSpecification" label="规格型号" />
+      <el-table-column prop="remark" label="备注" />
+    </el-table>
+    <div class="pagination clearfix" style="margin-top: 20px">
+      <div class="fr">
+        <el-pagination :current-page="table_currentPage" :page-size="table_pageSize" background
+          layout="prev, pager, next" :total="table_listTotal" @current-change="handleTableCurrentChange" />
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="selGoods">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { materialCategoryTree } from '@/api/auxiliaryMaterialClass'
+import {
+  newGetList,
+} from "@/api/masterAuxiliaryMaterials"
+export default {
+  props: {
+    guolvList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      innerVisible: true,
+      tableScreenForm: {
+        goodsId: "",
+        goodsName: "",
+        goodsCode: "",
+        categoryId: "",
+        goodsSpecification: ""
+      },
+      goodsList: [],
+      table_currentPage: 1,
+      table_pageSize: 10,
+      table_listTotal: 0,
+      table_chooseGoods: [],
+      materialCategoryTree: []
+    }
+  },
+  created() {
+    // 获取小类筛选
+    materialCategoryTree({ state: 'ON' }).then((res2) => {
+      this.materialCategoryTree = res2.data.filter(item => item.child && item.child.length > 0)
+    })
+    // 获取列表数据
+    this.getGoodsList();
+  },
+  methods: {
+    selectable(row, index) {
+      return !~this.guolvList.indexOf(row.goodsId)
+    },
+    // 获取商品列表
+    getGoodsList() {
+      newGetList({
+        "pageNum": this.table_currentPage,
+        "pageSize": this.table_pageSize,
+        "params": [
+          ...(() => { if (this.tableScreenForm.goodsId) { return [{ "param": "a.goods_id", "compare": "like", "value": this.tableScreenForm.goodsId }] } else { return [] } })(),
+          ...(() => { if (this.tableScreenForm.goodsName) { return [{ "param": "a.goods_name", "compare": "like", "value": this.tableScreenForm.goodsName }] } else { return [] } })(),
+          ...(() => { if (this.tableScreenForm.goodsCode) { return [{ "param": "a.goods_code", "compare": "like", "value": this.tableScreenForm.goodsCode }] } else { return [] } })(),
+          ...(() => { if (this.tableScreenForm.goodsSpecification) { return [{ "param": "a.goods_specification", "compare": "like", "value": this.tableScreenForm.goodsSpecification }] } else { return [] } })(),
+          ...(() => { if (this.tableScreenForm.categoryId) { return [{ "param": "b.category_id", "compare": "=", "value": this.tableScreenForm.categoryId }] } else { return [] } })(),
+        ]
+      }).then(res => {
+        this.goodsList = res.data.records;
+        this.table_listTotal = res.data.total;
+      });
+    },
+    // 搜索
+    getGoodsListByScreen() {
+      this.handleTableCurrentChange(1)
+    },
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      if (this.table_chooseGoods.length > 0) {
+        return this.$errorMsg("当前已选择商品");
+      }
+      this.table_currentPage = val;
+      this.getGoodsList();
+    },
+    // id
+    getRowKeys(row) {
+      return row.goodsId;
+    },
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.table_chooseGoods = val;
+    },
+    selGoods() {
+      console.log(this.table_chooseGoods)
+      this.$emit('confirm', this.table_chooseGoods)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>