暂存

src/template/addProduct/index.vue

@@ -10,8 +10,8 @@
         append-to-body
         @close="onClose">
       <div class="drawer__panel">
-        <div class=" flex-between">
-          <el-select v-model="sa_brandid" placeholder="选择品牌" size="small" clearable class="inline-16" @change="queryClass">
+        <div class="flex-between">
+          <el-select v-model="sa_brandid" placeholder="选择品牌" size="small" clearable class="inline-24" @change="queryClass">
             <el-option
                 v-for="item in options.brands"
                 :key="item.sa_brandid"
@@ -19,7 +19,26 @@
                 :value="item.sa_brandid">
             </el-option>
           </el-select>
-          <el-select v-model="sa_brandid" placeholder="选择分类" size="small" clearable class="inline-16" >
+          <el-cascader
+              placeholder="选择分类" size="small"
+              :options="options.itemclass"
+              :props="{ checkStrictly: true,children:'subdep',label:'itemclassname',value:'itemclassid' }"
+              clearable></el-cascader>
+        </div>
+        <div class="top-margin">
+          <el-button size="small" class="bottom-margin inline-16">一键全选</el-button>
+          <el-button size="small" class="inline-24 bottom-margin">添加选中商品</el-button>
+          <el-input  style="width:200px;" placeholder="商品名称/编码/品号" :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="params.content.where.condition" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="input-with-select inline-24 layout_search__panel bottom-margin" clearable>
+          </el-input>
+          <el-select v-model="sa_brandid" placeholder="选择标准" size="small" clearable class="inline-24 bottom-margin" @change="queryClass">
+            <el-option
+                v-for="item in options.brands"
+                :key="item.sa_brandid"
+                :label="item.brandname"
+                :value="item.sa_brandid">
+            </el-option>
+          </el-select>
+          <el-select v-model="sa_brandid" placeholder="选择材质" size="small" clearable class="inline-24 bottom-margin" @change="queryClass">
             <el-option
                 v-for="item in options.brands"
                 :key="item.sa_brandid"
@@ -27,6 +46,31 @@
                 :value="item.sa_brandid">
             </el-option>
           </el-select>
+          <el-input  style="width:200px;" placeholder="型号" :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="params.content.where.condition" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="bottom-margin input-with-select inline-24 layout_search__panel" clearable>
+          </el-input>
+          <el-input  style="width:200px;" placeholder="规格" :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="params.content.where.condition" @keyup.native.enter="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" size="small" class="bottom-margin input-with-select inline-24 layout_search__panel" clearable>
+          </el-input>
+        </div>
+        <div class="top-margin">
+          <tableTemp :data="list" :layout="tablecols" :opwidth="200" :custom="true" height="calc(100vh - 370px)">
+            <template v-slot:customcol="scope">
+              <p >{{scope.column.data[scope.column.columnname]}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+            </template>
+          </tableTemp>
+          <div  class="container normal-panel" style="text-align:right">
+            <el-pagination
+                background
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="params.content.pageNumber"
+                :page-sizes="[20, 50, 100, 200]"
+                :page-size="100"
+                layout="total,sizes, prev, pager, next, jumper"
+                :total="total">
+            </el-pagination>
+          </div>
         </div>
       </div>
     </el-drawer>
@@ -34,16 +78,38 @@
 </template>
 
 <script>
+import tableTemp from './table'
 export default {
   name: "index",
   props:["tradefield"],
+  components:{tableTemp},
   data(){
     return {
       dialogFormVisible:false,
       sa_brandid:'',
+      itemclassid:'',
+      tablecols:{},
+      list:[],
+      total:0,
       options:{
-        brands:[]
-      }
+        brands:[],
+        itemclass:[]
+      },
+      params:{
+        "id": 20221021171802,
+        "content": {
+          "sa_projectid": 2,
+          "pageNumber": 1,
+          "pageSize": 100,
+          "where": {
+            "condition": "",
+            "tradefield": "",
+            "standards": "",
+            "itemclassid": "",
+            "sa_brandid": ""
+          }
+        },
+      },
     }
   },
   methods:{
@@ -51,6 +117,16 @@ export default {
       this.dialogFormVisible = true
       console.log(this.tradefield)
       this.queryBrands()
+      this.listData()
+    },
+    /*可添加商品*/
+    async listData(){
+      this.params.content.sa_projectid = this.$route.query.id
+      const res = await this.$api.requested(this.params)
+      console.log(res,'可添加商品')
+      this.list = res.data
+      this.total = res.total
+      console.log(this.list)
     },
     /*获取品牌*/
     async queryBrands () {
@@ -74,16 +150,37 @@ export default {
         }
       })
       console.log(res.data,'pop')
+      this.options.itemclass = res.data[0].ttemclass
+      console.log(this.options.itemclass,'pop')
     },
     onClose(){
 
-    }
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.params.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.params.content.pageNumber = val
+      this.listData()
+    },
   },
   mounted() {
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).addProductTable.tablecols
   }
 }
 </script>
 
 <style scoped>
+  .top-margin{
+    margin-top: 20px;
 
+  }
+  .bottom-margin{
+    margin-bottom: 10px;
+  }
 </style>

src/template/addProduct/table.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data"  size="mini" :height="height" @row-click="rowClick" style="width:100%;min-height:300px"  border>
+      <el-table-column
+          type="selection"
+          width="55" @handleSelectionChange="handleSelectionChange" >
+      </el-table-column>
+      <el-table-column v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="width && col.width === 0 ? 150 : col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?'right':false : false">
+        <template slot-scope="scope">
+          <div class="table-panel">
+            <!-- 自定义表格显示内容 -->
+            <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+            <!-- 否则就是默认 -->
+            <span v-else>{{scope.row[col.columnname]}}</span>
+            <!-- 操作结构内容 -->
+            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex"
+export default {
+  /*
+    layout:表结构数据;
+    data:表渲染数据;
+    custom:是否启用自定义结构;
+    opwidth:操作列宽度
+  */
+  props:['layout','data','custom','height','checkbox','height','fixedName','width'],
+  data () {
+    return {
+      list:[],
+    }
+  },
+  computed:{
+    ...mapGetters({
+      loading:'loading'
+    })
+  },
+  methods:{
+    rowClick (row) {
+      this.$emit('rowClick',row)
+    },
+    tableClassName ({row,rowIndex}) {
+      row.index = rowIndex
+    },
+    handleSelectionChange(val) {
+      this.$emit('checkboxCallBack',val)
+    },
+    isCheck(row,rowIndex) {
+      if (!row.status) return true
+      if(row.status == '待跟进' || row.status == '跟进中' || row.projectnum) {
+        return true
+      } else {
+        return false
+      }
+    },
+
+  },
+  mounted () {
+    // this.listData()
+  }
+}
+
+</script>
+<style>
+</style>