drp-ui/src/views/material/changeApply/index.vue

<template>

  <el-card 
    v-loading="loading" 
    style="width: calc(100% - 24px); height: 100%; margin: 10px;padding: 10px;" 
    :body-style="{ padding: 0 }"
  >

    <AddChangeOrders
      ref="addChangeOrders"
      :size="size"
      :dict="dict"
      :add-type="optionType"
      @success="useReset"
    ></AddChangeOrders>
    <SeeChangeOrders
      ref="seeChangeOrders"
      :size="size"
      :dict="dict"
      @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-table
          v-model="tableList"
          :dict="dict"
          :columns="TableColumns"
          :size="size"
          pagination
          :page="page"
          @pagination="useQuery(params, page)"
          @row-dblclick="useSee"
        >
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="useSee(scope.row)">查看</el-button>
              <el-button @click="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="deleteRow(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3">删除</el-button>
            </template>
          </el-table-column>
        </el-super-table>
      </div>
    </div>
</el-card>

</template>

<script>
import { dicts } from "./dicts";
import { getChangeList , deleteChangeList} from '@/api/changeApply/basic';
import useColumns from './columns';
export default {
  name: 'changeApply',
  dicts:dicts,
  components: {
    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"),
  },

  data(){
    const {TableColumns,SearchColumns} = useColumns();
    const params = this.$init.params(SearchColumns);
    return {
      loading:false,
      size:'mini',
      tableList: [],
      TableColumns:TableColumns,
      page: { pageNum: 1, pageSize: 10, total: 0 },
      params:params,
      SearchColumns:SearchColumns,
      optionType:'add',


    }
  },
  methods:{
    
    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;

      setVisible(true);

      row && fetchItem(row);
    },

    async newAdd(){
      this.optionType = 'add';
      await this.openAddChangeOrders();
    },

    async handleEdit(row){  
      this.optionType = 'edit';
      await this.openAddChangeOrders(row);

    },

    async useQuery(params,page) {
      try {
        this.loading = true;
        let {code,rows,total} = await getChangeList({...params,...page});
        if (code === 200) {
          this.tableList = rows
          this.page.total = total;
        }
      } catch (error) {
        
      }finally{
        this.loading = false;
      }
    },
   

    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() => {

        try {
          let {code,msg} = await deleteChangeList({id: row.id});

          if(code == 200){
            this.$notify.success({
              // title: '成功',
              message: msg,
            });
            await this.useQuery(this.params, this.page);
          }
        } catch (error) {}
      })
    },
 
  },
  created(){
    this.useQuery(this.params, this.page);
  },
}

</script>