采购订单维护-详情页面虚拟表格样式调整

src/views/purchase/purchase-order/see/index.vue

@@ -10,8 +10,8 @@ import {
 import orderApi from "@/api/business/purchase/purchase-order";
 import { PRINT } from "@/api/business/purchase/task";
 import judgeColumns from "../add/column";
-import VirtualScroll from 'el-table-virtual-scroll';
-import { VirtualColumn } from 'el-table-virtual-scroll';
+import VirtualScroll from "el-table-virtual-scroll";
+import { VirtualColumn } from "el-table-virtual-scroll";
 
 const { Columns, TabColumns } = judgeColumns();
 
@@ -20,27 +20,31 @@ const NewTabColumns = TabColumns.map((element) => ({
   ...element,
   tableColumns: initColumns(element.tableColumns),
 }));
-// 
-const SelectColumns = NewColumns.filter(column => column.inputType === 'Select')
-NewTabColumns.forEach(column => {
-  SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.inputType === 'Select'))
+//
+const SelectColumns = NewColumns.filter(
+  (column) => column.inputType === "Select"
+);
+NewTabColumns.forEach((column) => {
+  SelectColumns.push(
+    ...column.tableColumns.filter((cColumn) => cColumn.inputType === "Select")
+  );
 });
 
-
 export default {
   name: "SeePurchaseOrderDrawer",
   dicts: initDicts(SelectColumns),
   components: {
-    'virtual-scroll':VirtualScroll,VirtualColumn,
-    FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
-    FilePrint:() => import('../print/index.vue'),
+    "virtual-scroll": VirtualScroll,
+    VirtualColumn,
+    FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
+    FilePrint: () => import("../print/index.vue"),
   },
   data() {
     return {
       visible: false,
       loading: false,
       columns: NewColumns,
-      printData:{},
+      printData: {},
       rules: initRules(NewColumns),
       params: {
         ...initParams(NewColumns),
@@ -50,33 +54,28 @@ export default {
 
       tabColumns: NewTabColumns,
       tabName: "puOrderItemList",
-      tableData:[],  //虚拟滚动加载显示的数据
+      tableData: [], //虚拟滚动加载显示的数据
     };
   },
   computed: {
-    tabHeight:{
-      get(){
-        let length = this.params['puOrderItemList'].filter(item => item.delFlag === '0').length;
-        return `${length ? 
-                  (length > 8 ? 500 :  (length *60) +170)
-                : 120}px`
+    tabHeight: {
+      get() {
+        let length = this.params["puOrderItemList"].filter(
+          (item) => item.delFlag === "0"
+        ).length;
+        return `${length ? (length > 8 ? 500 : length * 36 + 120) : 120}px`;
       },
-      set(){}
+      set() {},
     },
   },
   watch: {},
   methods: {
-    
     setVisible(prop) {
-
       this.visible = prop;
 
-      if(!this.visible){
-
-        this.$refs['orderSeeForm'].clearValidate();
-
+      if (!this.visible) {
+        this.$refs["orderSeeForm"].clearValidate();
       }
-
     },
 
     //查询详情
@@ -94,16 +93,16 @@ export default {
       }
 
       try {
-          this.loading = true;
-          const { data, code } = await PRINT({ id: this.params.id || 628 });
-          if (code === 200) {
-            this.printData = data;
-            this.loading = false;
-          }
-        } catch (err) {
-          alert(err);
-        } finally {
+        this.loading = true;
+        const { data, code } = await PRINT({ id: this.params.id || 628 });
+        if (code === 200) {
+          this.printData = data;
+          this.loading = false;
         }
+      } catch (err) {
+        alert(err);
+      } finally {
+      }
     },
     // 取 消
     handleCancel() {
@@ -112,42 +111,37 @@ export default {
         ...initParams(this.columns),
         puOrderItemList: [],
         puOrderExecuteList: [],
-      }
+      };
       this.setVisible(false);
     },
-    handleRefresh(){
-      let {id} = this.params;
+    handleRefresh() {
+      let { id } = this.params;
       this.fetchItem(id);
     },
     // 发送NC
-    async handleSendNC(){
-      console.log('发送NC');
+    async handleSendNC() {
+      console.log("发送NC");
 
       try {
-        let {code} = await orderApi.toNc({ puOrderId:this.params.id});
+        let { code } = await orderApi.toNc({ puOrderId: this.params.id });
 
-        if(code == 200){
+        if (code == 200) {
           this.handleRefresh();
         }
       } catch (error) {
-        
-      }finally{
-
+      } finally {
       }
     },
     // 判断是否能发送NC
-    judgeIsToNC(){
-
-      let {source,status,deliveryStatus} = this.params;
+    judgeIsToNC() {
+      let { source, status, deliveryStatus } = this.params;
 
       // 自制 & 状态为：自由态、驳回
       // if(source === '3' &&(status === '0' || status === '3')){
-      if(status === '2'){
-
+      if (status === "2") {
         // 发送NC之后展示 SUCCESS("0","成功"),SEND_IN("1","发送中"),FAILURE("2","失败");
         //    未发送                发送过但未成功
-        if(!deliveryStatus || (deliveryStatus && deliveryStatus !== '0')){
-
+        if (!deliveryStatus || (deliveryStatus && deliveryStatus !== "0")) {
           return true;
         }
 
@@ -156,80 +150,83 @@ export default {
 
       return false;
     },
-    beforeOpen() { 
-      
-    },
-    getSummaries({ columns, data }){
-      
-      const means = [] // 合计
+    beforeOpen() {},
+    getSummaries({ columns, data }) {
+      const means = []; // 合计
       let { tabColumns, tabName } = this;
       columns.forEach((column, columnIndex) => {
-          if (columnIndex === 0) {
-              means.push('合计')
-          } else {
-              const values = data.map(item => Number(item[column.property]));
-              
-              let sumColumn = tabColumns.find(tab => tab.key === tabName).tableColumns.filter(({key,isSummary}) => isSummary && key === column.property);
-
-              // 合计
-              // if (!values.every(value => isNaN(value))) {
-              if (sumColumn.length) {
-                  means[columnIndex] = values.reduce((prev, curr) => {
-                      const value = Number(curr);
-                      if (!isNaN(value)) {
-                          return prev + curr;
-                      } else {
-                          return prev;
-                      }
-                  }, 0);
-                  means[columnIndex] = means[columnIndex].toFixed(2); 
+        if (columnIndex === 0) {
+          means.push("合计");
+        } else {
+          const values = data.map((item) => Number(item[column.property]));
+
+          let sumColumn = tabColumns
+            .find((tab) => tab.key === tabName)
+            .tableColumns.filter(
+              ({ key, isSummary }) => isSummary && key === column.property
+            );
+
+          // 合计
+          // if (!values.every(value => isNaN(value))) {
+          if (sumColumn.length) {
+            means[columnIndex] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
               } else {
-                  means[columnIndex] = '';
+                return prev;
               }
-            }
-      })
+            }, 0);
+            means[columnIndex] = means[columnIndex].toFixed(2);
+          } else {
+            means[columnIndex] = "";
+          }
+        }
+      });
       // sums[index] = sums[index] && sums[index].toFixed(2); // 保留2位小数，解决小数合计列
-      return [means]
-			
-    }
-  },
-  created() { 
-
+      return [means];
+    },
   },
-  mounted() { },
-  destroyed() { },
+  created() {},
+  mounted() {},
+  destroyed() {},
 };
 </script>
 <template>
-  <el-drawer 
-    direction="btt" 
-    size="100%" 
-    :with-header="false" 
-    :visible.sync="visible" 
+  <el-drawer
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
     @open="beforeOpen"
     @close="$emit('close')"
     v-loading="loading"
   >
-    <el-form 
-      size="mini" 
-      label-position="right" 
-      label-width="140px" 
-      :model="params" 
+    <el-form
+      size="mini"
+      label-position="right"
+      label-width="140px"
+      :model="params"
       :rules="rules"
       ref="orderSeeForm"
-      class="orderSeeForm" 
+      class="orderSeeForm"
     >
-        
-      <el-card :body-style="{
-        padding: '20px',
-        display: 'flex',
-        'flex-wrap': 'wrap',
-      }" style="margin: 10px">
-        <div slot="header" style="
+      <el-card
+        :body-style="{
+          padding: '20px',
+          display: 'flex',
+          'flex-wrap': 'wrap',
+        }"
+        style="margin: 10px"
+      >
+        <div
+          slot="header"
+          style="
             display: flex;
             justify-content: space-between;
             align-items: center;
-          ">
+          "
+        >
           <h3>查看</h3>
           <div style="text-align: right">
             <!-- <FilePrint :id="params.id"></FilePrint> -->
@@ -243,139 +240,162 @@ export default {
                 :content="params.deliveryMsg"
                 placement="bottom-end"
               >
-                <el-button 
+                <el-button
                   :key="params.deliveryStatus"
-                  :disabled="params.deliveryStatus === '1' "
-                  size="mini" 
+                  :disabled="params.deliveryStatus === '1'"
+                  size="mini"
                   type="primary"
                   @click="handleSendNC"
-                >{{  params.deliveryStatus === '1' ? '发送中' :
-                    (params.deliveryStatus === '2'? '重新发送NC' : '发送NC')
-                }}</el-button>
+                  >{{
+                    params.deliveryStatus === "1"
+                      ? "发送中"
+                      : params.deliveryStatus === "2"
+                      ? "重新发送NC"
+                      : "发送NC"
+                  }}</el-button
+                >
               </el-tooltip>
             </template>
-            
+
             <el-button size="mini" @click="handleCancel">取 消</el-button>
           </div>
         </div>
-        <el-row style="display:flex; flex-wrap: wrap;">
-          <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 6">
+        <el-row style="display: flex; flex-wrap: wrap">
+          <el-col
+            v-for="(column, index) in columns"
+            :key="index"
+            :span="column.span || 6"
+          >
             <el-form-item :prop="column.key" :label="column.title">
-
-              <el-input v-if="column.inputType === 'Input'" 
-                v-model="params[column.key]" 
+              <el-input
+                v-if="column.inputType === 'Input'"
+                v-model="params[column.key]"
                 :placeholder="column.placeholder"
-                :clearable="column.clearable" 
-                readonly 
+                :clearable="column.clearable"
+                readonly
                 style="width: 100%"
               ></el-input>
-              <dr-popover-select v-if="column.inputType === 'PopoverSelect'" 
-                v-model="params[column.key]" 
+              <dr-popover-select
+                v-if="column.inputType === 'PopoverSelect'"
+                v-model="params[column.key]"
                 disabled
-                :value-key="column.valueKey" 
-                :source.sync="params" 
-                :title="column.title" 
+                :value-key="column.valueKey"
+                :source.sync="params"
+                :title="column.title"
                 :type="column.referName"
-                :multiple="column.multiple" 
-                :placeholder="column.placeholder" 
+                :multiple="column.multiple"
+                :placeholder="column.placeholder"
                 :data-mapping="column.dataMapping"
                 :query-params="column.queryParams"
               ></dr-popover-select>
 
-              <el-input v-if="column.inputType === 'Textarea'" 
-                v-model="params[column.key]" 
+              <el-input
+                v-if="column.inputType === 'Textarea'"
+                v-model="params[column.key]"
                 type="textarea"
-                :placeholder="column.placeholder" 
-                :clearable="column.clearable" 
-                readonly 
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                readonly
                 style="width: 100%"
               ></el-input>
 
-              <el-input-number v-if="column.inputType === 'InputNumber'" 
+              <el-input-number
+                v-if="column.inputType === 'InputNumber'"
                 v-model="params[column.key]"
-                :controls-position="column.controlsPosition" 
+                :controls-position="column.controlsPosition"
                 :placeholder="column.placeholder"
-                :clearable="column.clearable" 
+                :clearable="column.clearable"
                 :precision="column.precision"
-                disabled 
+                disabled
                 style="width: 100%"
               ></el-input-number>
-              <el-select v-if="column.inputType === 'Select'" 
-                v-model="params[column.key]" 
-                disabled 
+              <el-select
+                v-if="column.inputType === 'Select'"
+                v-model="params[column.key]"
+                disabled
                 size="mini"
-                :clearable="column.clearable" 
-                :placeholder="column.placeholder" 
-                style="width: 100%">
-                <el-option 
-                  v-for="item in dict.type[column.referName]" 
-                  :key="item.value" 
+                :clearable="column.clearable"
+                :placeholder="column.placeholder"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in dict.type[column.referName]"
+                  :key="item.value"
                   :label="item.label"
                   :value="item.value"
                 >
                 </el-option>
               </el-select>
-              <el-select v-if="column.inputType === 'TagSelect'" 
-                v-model="params[column.key]" 
-                multiple 
+              <el-select
+                v-if="column.inputType === 'TagSelect'"
+                v-model="params[column.key]"
+                multiple
                 clearable
-                collapse-tags 
-                :placeholder="column.placeholder" 
-                :clearable="column.clearable" 
+                collapse-tags
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
                 disabled
-                style="width: 100%">
+                style="width: 100%"
+              >
                 <template #prefix>
-                  <el-icon class="el-icon-view" 
-                    style="cursor: pointer" 
-                    @click.stop="$message.info(234)">
+                  <el-icon
+                    class="el-icon-view"
+                    style="cursor: pointer"
+                    @click.stop="$message.info(234)"
+                  >
                   </el-icon>
                 </template>
-                <el-option 
-                  v-for="item in options" 
-                  :key="item.value" 
-                  :label="item.label" 
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
                   :value="item.value"
                 >
                 </el-option>
               </el-select>
-              <el-date-picker v-if="column.inputType === 'DatePicker'" 
-                v-model="params[column.key]" 
+              <el-date-picker
+                v-if="column.inputType === 'DatePicker'"
+                v-model="params[column.key]"
                 :type="column.type"
-                :placeholder="column.placeholder" 
-                :clearable="column.clearable" 
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
                 readonly
-                :picker-options="column.pickerOptions" 
+                :picker-options="column.pickerOptions"
                 style="width: 100%"
               ></el-date-picker>
-              <el-checkbox v-if="column.inputType === 'Checkbox'" 
-                v-model="params[column.key]" 
-                disabled 
+              <el-checkbox
+                v-if="column.inputType === 'Checkbox'"
+                v-model="params[column.key]"
+                disabled
                 true-label="Y"
                 false-label="N"
               ></el-checkbox>
-              <file-upload-center v-if="column.inputType === 'Upload'" 
+              <file-upload-center
+                v-if="column.inputType === 'Upload'"
                 v-model="params[column.key]"
-                :file-type="column.fileType" 
+                :file-type="column.fileType"
                 :disabled="true"
               ></file-upload-center>
             </el-form-item>
           </el-col>
         </el-row>
       </el-card>
-      <el-card :body-style="{
-        padding: '20px',
-        display: 'flex',
-        'flex-wrap': 'wrap',
-        position: 'relative',
-      }" style="margin: 10px">
+      <el-card
+        :body-style="{
+          padding: '20px',
+          display: 'flex',
+          'flex-wrap': 'wrap',
+          position: 'relative',
+        }"
+        style="margin: 10px"
+      >
         <el-tabs v-model="tabName" style="width: 100%">
-          <el-tab-pane 
-            v-for="(column, index) in tabColumns" 
-            :key="index" 
-            :label="column.title" 
+          <el-tab-pane
+            v-for="(column, index) in tabColumns"
+            :key="index"
+            :label="column.title"
             :name="column.key"
           >
-
             <!-- <virtual-scroll 
               :data="params[column.key].filter(item => item.delFlag === '0')" 
               :item-size="53" 
@@ -384,119 +404,134 @@ export default {
               :virtualized="true"
             >
               <template slot-scope="{ headerCellFixedStyle, cellFixedStyle }"> -->
-                <ux-grid 
-                  border
-                  use-virtual
-                  show-summary
-                  show-overflow
-                  keep-source
-                  :ref="column.key"
-                  :height="tabHeight"
-                  style="width: 100%"
-                  :data="params[column.key].filter(item => item.delFlag === '0')" 
-                  :summary-method="getSummaries"
-                >
-                
-                  <ux-table-column title="序号" type="index" width="60"></ux-table-column>
-                  <ux-table-column 
-                    v-for="(cColumn, cIndex) in column.tableColumns" 
-                    :key="cIndex" 
-                    :field="cColumn.key"
-                    :title="cColumn.title" 
-                    :width="cColumn.width || 80"
-                    resizable
-                  >
-                    <template slot="header" slot-scope="scope">
-                      <span v-if="cColumn.require" style="color: #ff4949">*</span>
-                      <span>
-                        {{ cColumn.title }}
-                      </span>
-                    </template>
-                    <template slot-scope="scope">
-                      <el-form-item  label-width="0">
-                        <span v-if="!cColumn.inputType">
-                          {{ scope.row[cColumn.key] }}
-                        </span>
-                        
-                        <el-input v-if="cColumn.inputType === 'Input'" 
-                          v-model="scope.row[cColumn.key]"
-                          :placeholder="cColumn.placeholder" 
-                          :clearable="cColumn.clearable" 
-                          readonly 
-                          size="mini"
-                          style="width: 100%"
-                        ></el-input>
-
-                        <!--  -->
-                        <dr-popover-select v-if="cColumn.inputType === 'PopoverSelect'"
-                          v-model="scope.row[cColumn.key]"
-                          :source.sync="scope.row" 
-                          :title="cColumn.title" 
-                          :value-key="cColumn.valueKey" 
-                          disabled
-                          :type="cColumn.referName" 
-                          :multiple="cColumn.multiple" 
-                          :placeholder="cColumn.placeholder"
-                          :data-mapping="cColumn.dataMapping" 
-                          :query-params="cColumn.queryParams" 
-                          size="mini" 
-                        ></dr-popover-select>
-
-                        <el-input-number v-if="cColumn.inputType === 'InputNumber'" 
-                          v-model="scope.row[cColumn.key]"
-                          :precision="cColumn.precision"
-                          :controls-position="cColumn.controlsPosition" 
-                          :placeholder="cColumn.placeholder"
-                          :clearable="cColumn.clearable" 
-                          disabled 
-                          size="mini" 
-                          style="width: 100%"
-                        ></el-input-number>
-
-                        <el-select v-if="cColumn.inputType === 'Select'" 
-                          v-model="scope.row[cColumn.key]" 
-                          disabled 
-                          size="mini"
-                          :clearable="cColumn.clearable" 
-                          :placeholder="cColumn.placeholder" 
-                          style="width: 100%">
-                          <el-option 
-                            v-for="item in dict.type[cColumn.referName]" 
-                            :key="item.value" 
-                            :label="item.label"
-                            :value="item.value"
-                          ></el-option>
-                        </el-select>
-
-                        <el-checkbox v-if="cColumn.inputType === 'Checkbox'" 
-                          v-model="scope.row[cColumn.key]" 
-                          disabled
-                          true-label="Y" 
-                          false-label="N"
-                        ></el-checkbox>
-
-
-                      </el-form-item>
-                      
-                    </template>
-                  </ux-table-column>
-                </ux-grid>
-              <!-- </template>
+            <ux-grid
+              border
+              use-virtual
+              keep-source
+              show-summary
+              show-overflow
+              beautify-table
+              :size="'mini'"
+              :ref="column.key"
+              :height="tabHeight"
+              style="width: 100%"
+              :data="params[column.key].filter((item) => item.delFlag === '0')"
+              :summary-method="getSummaries"
+              :header-row-style="{
+                color: '#515a6e',
+              }"
+            >
+              <ux-table-column
+                title="序号"
+                type="index"
+                width="60"
+              ></ux-table-column>
+              <ux-table-column
+                v-for="(cColumn, cIndex) in column.tableColumns"
+                :key="cIndex"
+                :field="cColumn.key"
+                :title="cColumn.title"
+                :width="cColumn.width || 80"
+                resizable
+              >
+                <template slot="header" slot-scope="scope">
+                  <span v-if="cColumn.require" style="color: #ff4949">*</span>
+                  <span>
+                    {{ cColumn.title }}
+                  </span>
+                </template>
+                <template slot-scope="scope">
+                  <el-form-item label-width="0">
+                    <span v-if="!cColumn.inputType">
+                      {{ scope.row[cColumn.key] }}
+                    </span>
+
+                    <el-input
+                      v-if="cColumn.inputType === 'Input'"
+                      v-model="scope.row[cColumn.key]"
+                      :placeholder="cColumn.placeholder"
+                      :clearable="cColumn.clearable"
+                      readonly
+                      size="mini"
+                      style="width: 100%"
+                    ></el-input>
+
+                    <!--  -->
+                    <dr-popover-select
+                      v-if="cColumn.inputType === 'PopoverSelect'"
+                      v-model="scope.row[cColumn.key]"
+                      :source.sync="scope.row"
+                      :title="cColumn.title"
+                      :value-key="cColumn.valueKey"
+                      disabled
+                      :type="cColumn.referName"
+                      :multiple="cColumn.multiple"
+                      :placeholder="cColumn.placeholder"
+                      :data-mapping="cColumn.dataMapping"
+                      :query-params="cColumn.queryParams"
+                      size="mini"
+                    ></dr-popover-select>
+
+                    <el-input-number
+                      v-if="cColumn.inputType === 'InputNumber'"
+                      v-model="scope.row[cColumn.key]"
+                      :precision="cColumn.precision"
+                      :controls-position="cColumn.controlsPosition"
+                      :placeholder="cColumn.placeholder"
+                      :clearable="cColumn.clearable"
+                      disabled
+                      size="mini"
+                      style="width: 100%"
+                    ></el-input-number>
+
+                    <el-select
+                      v-if="cColumn.inputType === 'Select'"
+                      v-model="scope.row[cColumn.key]"
+                      disabled
+                      size="mini"
+                      :clearable="cColumn.clearable"
+                      :placeholder="cColumn.placeholder"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in dict.type[cColumn.referName]"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      ></el-option>
+                    </el-select>
+
+                    <el-checkbox
+                      v-if="cColumn.inputType === 'Checkbox'"
+                      v-model="scope.row[cColumn.key]"
+                      disabled
+                      true-label="Y"
+                      false-label="N"
+                    ></el-checkbox>
+                  </el-form-item>
+                </template>
+              </ux-table-column>
+            </ux-grid>
+            <!-- </template>
           </virtual-scroll> -->
-            
           </el-tab-pane>
         </el-tabs>
       </el-card>
-
     </el-form>
   </el-drawer>
 </template>
 
 <style scoped>
-  .orderSeeForm>>>.el-form-item{
-    margin-bottom: 12px;
-  }
-::v-deep .singleTable .el-form-item{
+.orderSeeForm >>> .el-form-item {
+  margin-bottom: 12px;
+}
+::v-deep .singleTable .el-form-item {
   margin-bottom: 0px;
 }
+::v-deep.uxbeautifyTableClass
+  .elx-header--column
+  .elx-resizable.is--line:before {
+  height: 100%;
+  background-color: #dfe6ec;
+}
 </style>