新建需求 增加产品弹窗

src/views/salesServiceManagement/components/productDialog.vue

@@ -0,0 +1,178 @@
+<template>
+  <ele-modal
+    :visible.sync="visible1"
+    :close-on-click-modal="false"
+    width="1200px"
+    append-to-body
+    @close="close"
+    :maxable="true"
+  >
+    <el-form :model="searchForm" label-width="100px" @submit.native.prevent>
+      <el-row :gutter="10">
+        <el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
+          <el-form-item label="编码">
+            <el-input
+              @keyup.enter.native="doSearch"
+              clearable
+              size="small"
+              v-model="searchForm.code"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
+          <el-form-item label="名称">
+            <el-input
+              @keyup.enter.native="doSearch"
+              clearable
+              size="small"
+              v-model="searchForm.name"
+              placeholder="请输入"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col v-bind="styleResponsive ? { md: 8 } : { span: 8 }">
+          <el-form-item>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-search"
+              class="ele-btn-icon"
+              @click="doSearch"
+              >查询</el-button
+            >
+
+            <el-button
+              @click="reset"
+              icon="el-icon-refresh"
+              class="ele-btn-icon"
+              size="medium"
+              >重置</el-button
+            >
+            <slot></slot>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-container class="assets-dialog">
+      <el-aside width="200px" class="wrapper-assets">
+        <AssetTree
+          ref="treeList"
+          :treeIds="[]"
+          itemType="5"
+          @handleNodeClick="handleNodeClick"
+        />
+      </el-aside>
+      <el-main>
+        <ele-pro-table
+          ref="table"
+          :columns="columns"
+          :datasource="tableList"
+          :selection.sync="selection"
+          row-key="id"
+          :needPage="false"
+        >
+          <template v-slot:toolbar>
+            <el-button type="primary" size="small" @click="add">添加</el-button>
+            <el-button size="small" @click="del">移除</el-button>
+          </template>
+        </ele-pro-table>
+      </el-main>
+    </el-container>
+  </ele-modal>
+</template>
+
+<script>
+  import AssetTree from './assetTree.vue';
+  import { getProductList } from '@/api/saleManage/quotation';
+  export default {
+    components: { AssetTree },
+    data() {
+      return {
+        visible1: false,
+        searchForm: {
+          code: '',
+          name: '',
+          categoryLevelId: ''
+        },
+        categoryLevelId: '',
+        columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 45,
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            prop: 'categoryCode',
+            label: '编码',
+            align: 'center'
+          },
+          {
+            prop: 'categoryName',
+            label: '名称',
+            align: 'center'
+          },
+          {
+            prop: 'categoryModel',
+            label: '型号',
+            align: 'center'
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            align: 'center'
+          },
+          {
+            prop: 'level',
+            label: '级别',
+            align: 'center'
+          },
+          {
+            prop: 'weight',
+            label: '重量',
+            align: 'center'
+          },
+          {
+            prop: 'weightUnit',
+            label: '重量单位',
+            align: 'center'
+          }
+        ],
+        tableData: [],
+        selection: []
+      };
+    },
+    methods: {
+      close() {
+        this.visible1 = false;
+      },
+      handleNodeClick(data) {
+        this.categoryLevelId = data.id;
+        this.searchForm.categoryLevelId = data.id;
+        this.doSearch();
+      },
+      doSearch() {},
+      async warehouseData() {
+        const res = await getProductList(this.searchForm);
+        this.tableData = res.list.map((el) => {
+          el.categoryModel = el.modelType;
+          el.categoryName = el.name;
+          el.categoryCode = el.code;
+          return el;
+        });
+      },
+      reset() {}
+    }
+  };
+</script>