1

src/components/ex-table/main.vue

@@ -42,6 +42,7 @@
       v-on="$listeners"
       @selection-change="handleSelectionChange"
       :span-method="arraySpanMethod"
+      row-key="id"
       style="width: 100%"
     >
       <template v-for="(column, index) in columns">
@@ -263,6 +264,15 @@ export default {
         return this.conditions.some((item) => item.prop === col.prop);
       };
     },
+    page_curr() {
+      return this.page.curr;
+    },
+    page_size() {
+      return this.page.size;
+    },
+    page_total() {
+      return this.page.total;
+    },
   },
   data() {
     return {
@@ -270,7 +280,17 @@ export default {
       tableSelection: [],
     };
   },
-  watch: {},
+  watch: {
+    page_curr: function (val) {
+      this.page.curr = val;
+    },
+    page_size: function (val) {
+      this.page.size = val;
+    },
+    page_total: function (val) {
+      this.page.total = val;
+    },
+  },
   mounted() {
     // 拖拽绑定
     this.rowDrop();

src/main.js

@@ -4,8 +4,6 @@ import 'element-ui/lib/theme-chalk/display.css';
 import Viewer from 'v-viewer';
 import ElementUI from 'element-ui'
 import 'viewerjs/dist/viewer.css'
-
-import "element-ui/lib/theme-chalk/display.css";
 import "./styles/element-variables.scss";
 
 import './styles/index.scss' // global css

src/views/good-share/components/changeBackGood.vue

@@ -100,17 +100,125 @@
               </template>
             </div>
             <div class="project-backGoodShow-title">商品反馈情况</div>
-            <div class="project-backGoodShow-backGood-table">
-              <template v-if="allList[index].tableData">
-                <!-- allList[index].pageInfo.curr = 1;
-                searchList(index); 
-                
-              -->
-                <ex-table
+            <div
+              class="project-backGoodShow-backGood-table"
+              v-if="allList[index].tableData && allList[index].tableData.length"
+              v-loading="allList[index].loading"
+            >
+              <el-table
+                ref="multipleTable"
+                :data="allList[index].tableData"
+                style="width: 100%; margin-bottom: 10px"
+                row-key="id"
+                border
+                stripe
+                :size="'mini'"
+                @selection-change="handleSelectionChange($event)"
+              >
+                <el-table-column
+                  type="selection"
+                  fixed="left"
+                  min-width="40"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="pgNo"
+                  label="商品要求编码"
+                  min-width="156px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="spuCode"
+                  label="商品编号"
+                  min-width="156px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="good_img"
+                  label="商品图片"
+                  min-width="242px"
+                  show-overflow-tooltip
+                >
+                  <template slot-scope="scope">
+                    <div
+                      v-if="scope.row.good_img && scope.row.good_img.length > 0"
+                    >
+                      <img
+                        v-for="(si, sii) in scope.row.good_img"
+                        :key="si + sii"
+                        :src="si"
+                        class="hover fl"
+                        style="
+                          display: inline-block;
+                          width: 20px;
+                          height: 20px;
+                          margin: 0 2px 0 0;
+                        "
+                        alt=""
+                        v-viewer
+                      />
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="good_name"
+                  label="商品名称"
+                  min-width="180px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="class_cat"
+                  label="商品分类"
+                  min-width="180px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="unit_name"
+                  label="单位"
+                  min-width="50px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="brand_name"
+                  label="品牌"
+                  min-width="80px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="work_day"
+                  label="制作工期"
+                  min-width="70px"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  prop="delivery_day"
+                  label="物流时间"
+                  min-width="70px"
+                  show-overflow-tooltip
+                />
+              </el-table>
+              <div
+                v-if="
+                  allList[index].tableData
+                "
+                class="Pagination"
+                style="text-align: right; "
+              >
+                <el-pagination
+                  :current-page="allList[index].pageInfo.curr"
+                  :page-size="allList[index].pageInfo.size"
+                  :size="'mini'"
+                  layout="total,  prev, pager, next, jumper"
+                  :total="allList[index].pageInfo.total"
+                  @size-change="handleSizeChange($event, index)"
+                  @current-change="handlePageChange($event, index)"
+                />
+              </div>
+              <!-- <ex-table
                   v-loading="allList[index].loading"
                   :table="table"
                   :data="allList[index].tableData"
-                  :columns="columns"
+                  :columns="good_change_columns"
                   :page="allList[index].pageInfo"
                   :size="'mini'"
                   @page-curr-change="handlePageChange($event, index)"
@@ -139,8 +247,15 @@
                       />
                     </div>
                   </template>
-                </ex-table>
-              </template>
+                  <template #operation="{ scope }">
+                    <el-tooltip effect="dark" content="详情" placement="top">
+                      <i
+                        class="el-icon-view tb-icon"
+                        @click="getRouter('salesOrderDetail', scope.row.id)"
+                      ></i>
+                    </el-tooltip>
+                  </template>
+                </ex-table> -->
             </div>
           </div>
         </div>
@@ -159,41 +274,79 @@
             :size="'mini'"
             style="width: 100%"
           >
-            <el-table-column label="商品要求" property="noIndex" width="80">
-            </el-table-column>
-            <el-table-column property="date" label="商品名称" width="145" />
-            <el-table-column property="name" label="图片" width="120">
+            <el-table-column
+              prop="pgNo"
+              label="商品要求编码"
+              min-width="156px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="spuCode"
+              label="商品编号"
+              min-width="156px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="good_img"
+              label="商品图片"
+              min-width="242px"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <div v-if="scope.row.good_img && scope.row.good_img.length > 0">
+                  <img
+                    v-for="(si, sii) in scope.row.good_img"
+                    :key="si + sii"
+                    :src="si"
+                    class="hover fl"
+                    style="
+                      display: inline-block;
+                      width: 20px;
+                      height: 20px;
+                      margin: 0 2px 0 0;
+                    "
+                    alt=""
+                    v-viewer
+                  />
+                </div>
+              </template>
             </el-table-column>
             <el-table-column
-              prope="class_cat"
-              label="分类"
+              prop="good_name"
+              label="商品名称"
+              min-width="180px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="class_cat"
+              label="商品分类"
+              min-width="180px"
               show-overflow-tooltip
             />
             <el-table-column
-              prope="work_day"
+              prop="unit_name"
+              label="单位"
+              min-width="50px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="brand_name"
+              label="品牌"
+              min-width="80px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="work_day"
               label="制作工期"
+              min-width="70px"
               show-overflow-tooltip
             />
             <el-table-column
-              prope="delivery_day"
+              prop="delivery_day"
               label="物流时间"
+              min-width="70px"
               show-overflow-tooltip
             />
-            <el-table-column fixed="right" label="操作" width="50">
-              <template slot-scope="scope">
-                <el-tooltip
-                  v-if="powers.some((item) => item == '006')"
-                  effect="dark"
-                  content="删除"
-                  placement="top"
-                >
-                  <i
-                    class="el-icon-delete tb-icon"
-                    @click="deleteItem(scope.$index)"
-                  ></i>
-                </el-tooltip>
-              </template>
-            </el-table-column>
           </el-table>
         </div>
       </div>
@@ -203,24 +356,12 @@
 <script>
 import { back_good_submit, back_good_list } from "@/apis";
 import resToken from "@/mixins/resToken";
-import columnsForm from "./columnsForm";
+import { good_change_columns } from "./columns";
 export default {
   name: "changeBackGood",
   props: ["showModel", "sitem", "id", "type", "newTime"],
   mixins: [resToken],
-  watch: {
-    // showModel: function (val) {
-    //   this.showModelThis = val;
-    //   if (val) {
-    //     this.initForm();
-    //   }
-    // },
-    // showModelThis(val) {
-    //   if (!val) {
-    //     this.$emit("cancel");
-    //   }
-    // },
-  },
+
   data() {
     return {
       loading: false,
@@ -239,14 +380,15 @@ export default {
         { value: "4", label: "待方案选择" },
         { value: "5", label: "项目结束" },
       ],
+      tableData: [],
       table: {
         stripe: true,
         border: true,
+        "max-height": "450px",
         // _defaultHeader_: ["setcol"],
       },
       // 表格 - 列参数
-      columns: columnsForm,
-      tableData: [],
+      good_change_columns,
     };
   },
   mounted() {
@@ -321,7 +463,23 @@ export default {
         }
       }
     },
+    handleSelectionChange(e) {
+      this.allList[this.index].selection = JSON.parse(JSON.stringify(e));
+      let change_all_list = [];
+      this.allList.forEach((a, ai) => {
+        const { selection } = a;
+        if (selection && selection.length > 0) {
+          selection.forEach((b) => {
+            let item = JSON.parse(JSON.stringify(b));
+            item.noIndex = ai + 1;
+            change_all_list.push(item);
+          });
+        }
+      });
+      this.tableData = JSON.parse(JSON.stringify(change_all_list));
+    },
     selection_change(e) {
+      console.log(e);
       const { list } = e;
       this.allList[this.index].selection = JSON.parse(JSON.stringify(list));
       let change_all_list = [];
@@ -352,7 +510,7 @@ export default {
           let model = {
             ladder: [item],
             pageInfo: {
-              size: 15,
+              size: 10,
               curr: 1,
               total: 0,
             },
@@ -386,7 +544,7 @@ export default {
     async searchList(index) {
       const { pageInfo, pgNo } = this.allList[index];
       const { size, curr } = pageInfo;
-      console.log(pgNo);
+      // console.log(pgNo);
       this.allList[index].loading = true;
       let model = {
         page: curr,
@@ -399,11 +557,11 @@ export default {
         projectNo: this.projectNo,
       };
       model.full = this.$route.path;
+      this.allList[index].tableData = [];
       const { code, data } = await back_good_list(model);
       if (code === 0) {
         const { list, count } = data;
         this.allList[index].tableData = list;
-        // list;
         this.allList[index].tableData.map((v) => {
           v.class_cat = "";
           if (v.can && v.can.length > 0) {
@@ -411,13 +569,24 @@ export default {
               v.class_cat += i === 0 ? x.name : "_" + x.name;
             });
           }
+          if (v.good_img) {
+            v.good_img =
+              Object.prototype.toString.call(v.good_img) === "[object Array]"
+                ? v.good_img
+                : (v.good_img || "").split(",");
+          }
           return v;
         });
+
+        this.allList[index].tableData.forEach((si, sii) => {
+          this.$set(this.allList[index].tableData, sii, si);
+        });
         this.allList[index].pageInfo.total = Number(count);
       } else if (code >= 100 && code <= 104) {
         await this.logout();
       } else {
         this.allList[index].tableData = [];
+
         this.allList[index].pageInfo.total = 0;
       }
       this.allList[index].loading = false;

src/views/good-share/components/columns.js

@@ -0,0 +1,100 @@
+const good_show_columns = [
+    {
+        prop: "pgNo",
+        label: "商品要求编码",
+        width: '155px'
+    },
+    {
+        prop: "spuCode",
+        label: "商品编号",
+        width: '155px'
+    },
+    {
+        prop: "good_img",
+        label: "图片",
+        _solt_: 'good_img',
+        width: '50px'
+    },
+    {
+        prop: "good_name",
+        label: "商品名称",
+    },
+    {
+        prop: "class_cat",
+        label: "商品分类",
+        'width': '180px'
+    },
+
+    {
+        prop: "unit_name",
+        label: "单位",
+        'width': '50px'
+    },
+
+    {
+        prop: "brand_name",
+        label: "品牌",
+        width: '80px'
+    },
+    {
+        prop: "work_day",
+        label: "制作工期",
+        width: '70px'
+    },
+    {
+        prop: "delivery_day",
+        label: "物流时间",
+        width: '70px'
+    },
+]
+const good_change_columns = [
+    { type: "selection", fixed: "left", _noset_: true },
+    {
+        prop: "pgNo",
+        label: "商品要求编码",
+        width: '155px'
+    },
+    {
+        prop: "spuCode",
+        label: "商品编号",
+        width: '155px'
+    },
+    {
+        prop: "good_img",
+        label: "图片",
+        _solt_: 'good_img',
+        width: '50px'
+    },
+    {
+        prop: "good_name",
+        label: "商品名称",
+    },
+    {
+        prop: "class_cat",
+        label: "商品分类",
+        'width': '180px'
+    },
+
+    {
+        prop: "unit_name",
+        label: "单位",
+        'width': '50px'
+    },
+
+    {
+        prop: "brand_name",
+        label: "品牌",
+        width: '80px'
+    },
+    {
+        prop: "work_day",
+        label: "制作工期",
+        width: '70px'
+    },
+    {
+        prop: "delivery_day",
+        label: "物流时间",
+        width: '70px'
+    },
+]
+export { good_change_columns, good_show_columns }

src/views/good-share/components/columnsForm.js

@@ -1,51 +0,0 @@
-export default [
-    { type: "selection", fixed: "left", _noset_: true },
-    {
-        prop: "pgNo",
-        label: "商品要求编码",
-        width: '160px'
-    },
-    {
-        prop: "spuCode",
-        label: "商品编号",
-        width: '160px'
-    },
-
-    {
-        prop: "good_name",
-        label: "商品名称",
-        _slot_:"good_name",
-    },
-    // {
-    //     prop: "good_name",
-    //     label: "商品名称",
-    // },
-    {
-        prop: "class_cat",
-        label: "商品分类",
-        'width': '180px'
-    },
-
-    {
-        prop: "unit_name",
-        label: "单位",
-        'width': '50px'
-    },
-  
-    {
-        prop: "brand_name",
-        label: "品牌",
-        width: '80px'
-    },
-    // {
-    //     prop: "work_day",
-    //     label: "制作工期",
-    //     width: '70px'
-    // },
-    // {
-    //     prop: "delivery_day",
-    //     label: "物流时间",
-    //     width: '70px'
-    // },
- 
-]

src/views/good-share/components/showBackGood.vue

@@ -95,41 +95,139 @@
           </div>
           <div class="project-backGoodShow-title">商品反馈情况</div>
           <div class="project-backGoodShow-backGood-table">
-            <template>
-              <ex-table
-                v-loading="loading"
-                :table="table"
-                :data="tableData"
-                :columns="columns"
-                :page="pageInfo"
-                :size="'mini'"
-                @page-curr-change="handlePageChange($event)"
-                @page-size-change="handleSizeChange($event)"
-                @screen-reset="
-                  pageInfo.curr = 1;
-                  searchList();
-                "
-                @screen-submit="
-                  pageInfo.curr = 1;
-                  searchList();
-                "
+            <el-table
+              style="width: 100%; margin-bottom: 10px"
+              row-key="id"
+              border
+              stripe
+              :size="'mini'"
+              v-loading="loading"
+              :data="tableData"
+            >
+              <el-table-column
+                prop="pgNo"
+                label="商品要求编码"
+                min-width="156px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="spuCode"
+                label="商品编号"
+                min-width="156px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="good_img"
+                label="商品图片"
+                min-width="242px"
+                show-overflow-tooltip
               >
-                <template #good_name="{ scope }">
+                <template slot-scope="scope">
+                  <div
+                    v-if="scope.row.good_img && scope.row.good_img.length > 0"
+                  >
+                    <img
+                      v-for="(si, sii) in scope.row.good_img"
+                      :key="si + sii"
+                      :src="si"
+                      class="hover fl"
+                      style="
+                        display: inline-block;
+                        width: 20px;
+                        height: 20px;
+                        margin: 0 2px 0 0;
+                      "
+                      alt=""
+                      v-viewer
+                    />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="good_name"
+                label="商品名称"
+                min-width="180px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="class_cat"
+                label="商品分类"
+                min-width="180px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="unit_name"
+                label="单位"
+                min-width="50px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="brand_name"
+                label="品牌"
+                min-width="80px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="work_day"
+                label="制作工期"
+                min-width="70px"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                prop="delivery_day"
+                label="物流时间"
+                min-width="70px"
+                show-overflow-tooltip
+              />
+            </el-table>
+            <div v-if="tableData" class="Pagination" style="text-align: right">
+              <el-pagination
+                :current-page="pageInfo.curr"
+                :page-size="pageInfo.size"
+                :size="'mini'"
+                layout="total,  prev, pager, next, jumper"
+                :total="pageInfo.total"
+                @size-change="handleSizeChange($event)"
+                @current-change="handlePageChange($event)"
+              />
+            </div>
+            <!-- <ex-table
+              v-loading="loading"
+              :table="table"
+              :data="tableData"
+              :columns="good_show_columns"
+              :page="pageInfo"
+              :size="'mini'"
+              @page-curr-change="handlePageChange($event)"
+              @page-size-change="handleSizeChange($event)"
+              @screen-reset="
+                pageInfo.curr = 1;
+                searchList();
+              "
+              @screen-submit="
+                pageInfo.curr = 1;
+                searchList();
+              "
+            >
+              <template #good_img="{ scope }">
+                <div v-if="scope.row.good_img && scope.row.good_img.length > 0">
                   <img
-                    v-if="scope.row.good_img"
-                    class="fl hover"
-                    v-viewer
-                    :src="scope.row.good_img"
-                    style="display: inline-block; width: 23px; height: 23px"
+                    v-for="(si, sii) in scope.row.good_img"
+                    :key="si + sii"
+                    :src="si"
+                    class="hover fl"
+                    style="
+                      display: inline-block;
+                      width: 20px;
+                      height: 20px;
+                      margin: 0 2px 0 0;
+                    "
                     alt=""
+                    v-viewer
                   />
-                  <span>{{ scope.row.good_name }}</span
-                  ><span v-for="(si, sii) in scope.row.can" :key="si.id + sii"
-                    >{{ sii === 0 ? "_" : "-" }}{{ si.name }}</span
-                  >
-                </template>
-              </ex-table>
-            </template>
+                </div>
+              </template>
+            </ex-table> -->
           </div>
           <div class="project-backGoodShow-title" v-if="total !== 0">
             <span class="fl">
@@ -186,7 +284,7 @@
             <span
               v-if="plan_show"
               class="fl"
-              style="font-size: 13px; color: #e4393c;padding:0 0 0 20px"
+              style="font-size: 13px; color: #e4393c; padding: 0 0 0 20px"
               >方案总金额：{{ plan_show.sale_total }}元</span
             >
           </div>
@@ -205,43 +303,46 @@
               <el-table-column
                 prop="pgNo"
                 label="要求编码"
-                width="180px"
+                width="155px"
                 show-overflow-tooltip
               />
 
               <el-table-column
                 prop="sale_price"
-                label="销售单价"
+                label="销售单价(元)"
                 width="110"
                 show-overflow-tooltip
-              >
-                <template slot-scope="scope">
-                  <span>{{ scope.row.sale_price }}元</span>
-                </template>
-              </el-table-column>
+              />
+
               <el-table-column
                 prop="num"
                 label="购买数量"
-                width="110"
+                width="100"
                 show-overflow-tooltip
               />
               <el-table-column
                 prop="good_img"
-                label="图片"
-                width="50"
+                label="商品图片"
+                min-width="242px"
                 show-overflow-tooltip
               >
                 <template slot-scope="scope">
                   <div
-                    v-if="scope.row.good_img"
-                    style="width: 20px; height: 20px"
-                    class="hover"
-                    v-viewer
+                    v-if="scope.row.good_img && scope.row.good_img.length > 0"
                   >
                     <img
-                      :src="scope.row.good_img"
-                      style="display: inline-block; width: 100%; height: 100%"
+                      v-for="(si, sii) in scope.row.good_img"
+                      :key="si + sii"
+                      :src="si"
+                      class="hover fl"
+                      style="
+                        display: inline-block;
+                        width: 20px;
+                        height: 20px;
+                        margin: 0 2px 0 0;
+                      "
                       alt=""
+                      v-viewer
                     />
                   </div>
                 </template>
@@ -276,6 +377,13 @@
                   >
                 </template></el-table-column
               >
+
+              <el-table-column
+                prop="brand_name"
+                label="品牌"
+                width="100px"
+                show-overflow-tooltip
+              />
             </el-table>
           </div>
         </div>
@@ -285,7 +393,7 @@
 </template>
 <script>
 import { change_project_plan, back_good_list, get_project_plan } from "@/apis";
-import columnsForm from "./columnsForm";
+import { good_show_columns } from "./columns";
 export default {
   name: "changeBackGood",
   props: ["showModel", "sitem", "id", "type", "newTime"],
@@ -307,7 +415,7 @@ export default {
       index: 0,
       total: 0,
       pageInfo: {
-        size: 15,
+        size: 10,
         curr: 1,
         total: 0,
       },
@@ -333,7 +441,7 @@ export default {
         // _defaultHeader_: ["setcol"],
       },
       // 表格 - 列参数
-      columns: [],
+      good_show_columns,
       plan_show: {
         sale_total: "0",
         feedback: [],
@@ -346,17 +454,12 @@ export default {
   methods: {
     //初始化整个组件
     async initForm() {
-      this.columns = [];
       this.loading = true;
-      let list = JSON.parse(JSON.stringify(columnsForm));
-      list.shift();
-      this.columns = list;
+
       this.tableData = [];
       await this.initListData();
       await this.get_plan();
-      // console.log(this.allList);
       this.loading = false;
-      // console.log(this.allList);
     },
     async add_plan() {
       const { planNo, status } = JSON.parse(
@@ -458,7 +561,7 @@ export default {
         status: "1",
         projectNo: this.projectNo,
       };
-       model.full = this.$route.path;
+      model.full = this.$route.path;
       const { code, data } = await back_good_list(model);
       if (code === 0) {
         const { list, count } = data;
@@ -478,6 +581,12 @@ export default {
               }]`;
             });
           }
+          if (v.good_img) {
+            v.good_img =
+              Object.prototype.toString.call(v.good_img) === "[object Array]"
+                ? v.good_img
+                : (v.good_img || "").split(",");
+          }
           return v;
         });
         this.pageInfo.total = Number(count);
@@ -531,6 +640,12 @@ export default {
         feedback: JSON.parse(JSON.stringify(feedback)),
       };
       for (let i = 0; i < this.plan_show.feedback.length; i++) {
+        this.plan_show.feedback[i].good_img =
+          Object.prototype.toString.call(
+            this.plan_show.feedback[i].good_img
+          ) === "[object Array]"
+            ? this.plan_show.feedback[i].good_img
+            : (this.plan_show.feedback[i].good_img || "").split(",");
         this.$set(this.plan_show.feedback[i], i, this.plan_show.feedback[i]);
       }
       console.log(this.plan_show);

src/views/good-share/index.vue

@@ -40,6 +40,7 @@
         :sitem="sitem"
         @refresh="initData()"
       />
+
       <show-back-good
         v-if="
           newTime !== '' && (status === '3' || status === '4' || status === '5')
@@ -93,7 +94,7 @@ export default {
       this.loading = true;
       const { code, message, data } = await detail({
         projectNo: this.queryId,
-        full: this.$route.path
+        full: this.$route.path,
       });
       this.loading = false;
       if (code === 0) {