物料申请单-列表新增当前审批人字段，虚拟表格动态加载

src/views/material/changeApply/columns.js

@@ -28,6 +28,12 @@ export default function useColumns() {
       attr: {  },
     },
     { item: { key: "updateTime", title: "最后修改时间" }, attr: {} },
+    
+    { 
+      item:{ key: "approveUser", title: "当前审批人" ,},
+      attr:{
+      },
+    },
    
   ].map(({ item, attr }) => ({
     attr,

src/views/material/changeApply/index.vue

@@ -1,11 +1,13 @@
 <template>
-
-  <el-card 
-    v-loading="loading" 
-    style="width: calc(100% - 24px); height: 100%; margin: 10px;padding: 10px;" 
-    :body-style="{ padding: 0 }"
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
   >
-
     <AddChangeOrders
       ref="addChangeOrders"
       :size="size"
@@ -20,135 +22,138 @@
       @success="useReset"
     ></SeeChangeOrders>
 
-    <div>
-
-      <el-super-search
-        v-model="params"
-        :size="size"
-        :dict="dict"
-        :columns="SearchColumns"
-        @reset="useReset"
-        @row-dblclick="useSee"
-        @submit="useQuery(params, page)"
-      ></el-super-search>
-
-      <el-row 
-        :gutter="10" 
-        class="mb10" 
-        type="flex" 
-        justify="end"
-        style="margin-top: 20px;"
-      >
-        <el-col :span="1.5">
-          <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
-          <!-- <BatchImport></BatchImport> -->
-        </el-col>
-      </el-row>
-
-      <!-- <div style="height: 600px; display:flex;"> -->
-        <el-super-ux-table
-          v-model="tableList"
-          :dict="dict"
-          :size="size"
-          pagination
-          :page="page"
-          :height="tableHeight"
-          :columns="TableColumns"
-          @pagination="useQuery(params, page)"
-          @row-dblclick="useSee"
-        >
-          <ux-table-column fixed="right" title="操作" width="180" align="center">
-            <template slot-scope="scope">
-              <el-button type="text" size="small" @click.stop="useSee(scope.row)">查看</el-button>
-              <el-button 
-                v-if="scope.row.status == '1'" 
-                type="text" 
-                size="mini"
-                @click.stop="handleBack(scope.row)"
-              >收回</el-button>
-              <el-button  
-                v-if="scope.row.oaId && scope.row.oaId !=''" 
-                @click.stop="jumpFlow(scope.row)" 
-                type="text"
-                :size="size"
-              >流程跳转</el-button>
-              <el-button @click.stop="handleEdit(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3" type="text" size="small">编辑</el-button>
-              <el-button type="text" size="small" @click.stop="deleteRow(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3">删除</el-button>
-            </template>
-          </ux-table-column>
-        </el-super-ux-table>
-      <!-- </div> -->
-    </div>
-</el-card>
+    <el-super-search
+      v-model="params"
+      :size="size"
+      :dict="dict"
+      :columns="SearchColumns"
+      @reset="useReset"
+      @row-dblclick="useSee"
+      @submit="useQuery(params, page)"
+    ></el-super-search>
+
+    <el-row
+      :gutter="10"
+      class="mb10"
+      type="flex"
+      justify="end"
+      style="margin-top: 20px"
+    >
+      <el-col :span="1.5">
+        <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
+        <!-- <BatchImport></BatchImport> -->
+      </el-col>
+    </el-row>
 
+    <el-super-ux-table
+      v-model="tableList"
+      :dict="dict"
+      :size="size"
+      pagination
+      :page="page"
+      :columns="TableColumns"
+      storage-key="MaterialApplySuperTable"
+      @pagination="useQuery(params, page)"
+      @row-dblclick="useSee"
+    >
+      <ux-table-column fixed="right" title="操作" width="180" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click.stop="useSee(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            v-if="scope.row.status == '1'"
+            type="text"
+            size="mini"
+            @click.stop="handleBack(scope.row)"
+            >收回</el-button
+          >
+          <el-button
+            v-if="scope.row.oaId && scope.row.oaId != ''"
+            @click.stop="jumpFlow(scope.row)"
+            type="text"
+            :size="size"
+            >流程跳转</el-button
+          >
+          <el-button
+            @click.stop="handleEdit(scope.row)"
+            v-if="scope.row.status == 0 || scope.row.status == 3"
+            type="text"
+            size="small"
+            >编辑</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click.stop="deleteRow(scope.row)"
+            v-if="scope.row.status == 0 || scope.row.status == 3"
+            >删除</el-button
+          >
+        </template>
+      </ux-table-column>
+    </el-super-ux-table>
+  </el-card>
 </template>
 
 <script>
 import { dicts } from "./dicts";
-import { getChangeList , deleteChangeList,toOA} from '@/api/changeApply/basic';
+import { getChangeList, deleteChangeList, toOA } from "@/api/changeApply/basic";
 // 流程收回通用接口
-import {oaBack} from '@/api/requisition/basic';
-import useColumns from './columns';
+import { oaBack } from "@/api/requisition/basic";
+import useColumns from "./columns";
 export default {
-  name: 'changeApply',
-  dicts:[...dicts, 'oa_templete_id'],
+  name: "changeApply",
+  dicts: [...dicts, "oa_templete_id"],
   components: {
-    AddChangeOrders:() => import('./add/index.vue'),
-    SeeChangeOrders:() => import('./see/index.vue'),
-    BatchImport:() => import('./batchImport/index.vue'),
+    AddChangeOrders: () => import("./add/index.vue"),
+    SeeChangeOrders: () => import("./see/index.vue"),
+    BatchImport: () => import("./batchImport/index.vue"),
     ElSuperTable: () => import("@/components/super-table/index.vue"),
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
     ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
   },
 
-  data(){
-    const {TableColumns,SearchColumns} = useColumns();
+  data() {
+    const { TableColumns, SearchColumns } = useColumns();
     const params = this.$init.params(SearchColumns);
     return {
-      loading:false,
-      size:'mini',
+      loading: false,
+      size: "mini",
       tableList: [],
-      TableColumns:TableColumns,
+      TableColumns: TableColumns,
       page: { pageNum: 1, pageSize: 50, total: 0 },
-      params:params,
-      SearchColumns:SearchColumns,
-      optionType:'add',
-
-
-    }
+      params: params,
+      SearchColumns: SearchColumns,
+      optionType: "add",
+    };
   },
-  methods:{
-    async jumpFlow (row){
-
-      const {name} = this.$store.state.user;
+  methods: {
+    async jumpFlow(row) {
+      const { name } = this.$store.state.user;
 
       try {
+        let { code, msg, oaUrl } = await toOA(name, row.oaId);
 
-        let {code,msg,oaUrl} = await toOA(name,row.oaId);
-
-        if(code == 200){
-          window.open(oaUrl)
+        if (code == 200) {
+          window.open(oaUrl);
         }
-        
       } catch (error) {
-        
-      }finally{
-
+      } finally {
       }
     },
-    
+
     //流程收回
-    async handleBack(row){
-      console.log('row', row)
-      console.log('this.dicts.type', this.dict)
+    async handleBack(row) {
+      console.log("row", row);
+      console.log("this.dicts.type", this.dict);
       try {
         const { msg, code } = await oaBack({
-          fdTemplateId: this.dict.type.oa_templete_id.find(item => {
-            return item.label == "物料变更单"
+          fdTemplateId: this.dict.type.oa_templete_id.find((item) => {
+            return item.label == "物料变更单";
           }).value,
           fdId: row.oaId,
           billCode: row.code,
-          billMaker: row.createBy
+          billMaker: row.createBy,
         });
         if (code === 200) {
           this.$emit("success");
@@ -161,67 +166,61 @@ export default {
       }
     },
 
-    useReset(){
+    useReset() {
       this.page.pageNum = 1;
       this.page.pageSize = 10;
       this.params = this.$init.params(this.SearchColumns);
       this.useQuery(this.params, this.page);
     },
-    
-    // 
+
+    //
     openAddChangeOrders(row) {
-    
-      const {setVisible,fetchItem} = this.$refs.addChangeOrders;
+      const { setVisible, fetchItem } = this.$refs.addChangeOrders;
 
       setVisible(true);
 
       row && fetchItem(row);
     },
 
-    async newAdd(){
-      this.optionType = 'add';
+    async newAdd() {
+      this.optionType = "add";
       await this.openAddChangeOrders();
     },
 
-    async handleEdit(row){  
-      this.optionType = 'edit';
+    async handleEdit(row) {
+      this.optionType = "edit";
       await this.openAddChangeOrders(row);
-
     },
 
-    async useQuery(params,page) {
+    async useQuery(params, page) {
       try {
         this.loading = true;
-        let {code,rows,total} = await getChangeList({...params,...page});
+        let { code, rows, total } = await getChangeList({ ...params, ...page });
         if (code === 200) {
-          this.tableList = rows
+          this.tableList = rows;
           this.page.total = total;
         }
       } catch (error) {
-        
-      }finally{
+      } finally {
         this.loading = false;
       }
     },
-   
 
-    async useSee(row){
-      const {setVisible,fetchItem} = this.$refs.seeChangeOrders;
+    async useSee(row) {
+      const { setVisible, fetchItem } = this.$refs.seeChangeOrders;
       await setVisible(true);
       await fetchItem(row);
-
     },
-    deleteRow(row){
-      this.$confirm('是否删除此条数据?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async() => {
-
+    deleteRow(row) {
+      this.$confirm("是否删除此条数据?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async () => {
         try {
-          let {code,msg} = await deleteChangeList({id: row.id});
+          let { code, msg } = await deleteChangeList({ id: row.id });
 
-          if(code == 200){
+          if (code == 200) {
             this.$notify.success({
               // title: '成功',
               message: msg,
@@ -229,23 +228,31 @@ export default {
             await this.useQuery(this.params, this.page);
           }
         } catch (error) {}
-      })
+      });
     },
- 
   },
   computed: {
-      tableHeight:{
-        get(){
-          console.log(window,'window');
-          return window.innerHeight - 220;
-        },
-        set(){},
-      }
+    tableHeight: {
+      get() {
+        console.log(window, "window");
+        return window.innerHeight - 220;
+      },
+      set() {},
     },
-  created(){
-    this.params.code = this.$route.query.billCode
+  },
+  created() {
+    this.params.code = this.$route.query.billCode;
     this.useQuery(this.params, this.page);
   },
-}
+};
+</script>
 
-</script>
+<style scoped lang="scss">
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+}
+</style>