drp-ui/src/views/purchase/apply/index.vue

<script>
import { LIST } from "@/api/business/purchase/apply";
import { TableColumns, SearchColumns } from "./column";
import { initDicts, initParams } from "@/utils/init.js";
export default {
  name: "PuchaseApply",
  dicts: [...initDicts([...TableColumns, ...SearchColumns]), "sys_price_type"],
  components: {
    AddModel: () => import("./add/index.vue"),
    SeeModel: () => import("./see/index.vue"),
    EditModel: () => import("./edit/index.vue"),
    SubmitModel: () => import("./submit/index.vue"),
    DeleteModel: () => import("./delete/index.vue"),
    ElHideTableColumnButton: () =>
      import("@/components/hide-table-column/index.vue"),
    ElSuperTable: () => import("@/components/super-table/index.vue"),
    ElSuperSearch: () => import("@/components/super-search/index.vue"),
  },
  data() {
    return {
      size: "mini",
      loading: false,
      batching: false,
      SearchColumns: SearchColumns,
      params: initParams(SearchColumns),
      tableData: [],
      selectData: [],
      TableColumns: TableColumns,
      page: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },
  computed: {
    $dicts: {
      get: function () {
        return this.dict.type;
      },
    },
    $power: {
      get() {
        const {
          selectData,
          selectData: [{ status } = {}],
        } = this;
        const rule1 = selectData.length === 1;
        const rule2 = selectData.length > 1;
        const rule3 = status === "0" || status === "3";
        return {
          // 复 制
          copy: rule1,
          // 修 改
          edit: rule1 && rule3,
          // 删 除
          delt: rule1 ? rule1 && rule3 : rule2,
          // 审 核
          subm: rule1 ? rule1 && rule3 : rule2,
        };
      },
    },
  },
  created() {
    this.params.status = "0";
    this.useQuery(this.params, this.page);
  },
  methods: {
    //
    setSelectable(row) {
      const { status } = row;
      // 审批中
      if (status === "1") return false;
      // 已完成
      else if (status === "2") return false;
      // other
      else return true;
    },
    //
    async fetchList(prop, page) {
      try {
        this.loading = true;
        const { pageNum, pageSize } = page;
        const { code, rows, total } = await LIST(
          { ...prop },
          { pageNum, pageSize }
        );
        if (code === 200) {
          this.tableData = rows.map((item, index) => ({
            ...item,
            $index: (pageNum - 1) * pageSize + index + 1,
          }));
          this.page.total = total;
        }
      } catch (err) {
        // catch
        console.error(err);
      } finally {
        // finally
        this.loading = false;
      }
    },
    // 查 询
    useQuery(prop, page) {
      this.selectData = [];
      this.fetchList(prop, page);
    },
    // 重 置
    useReset() {
      this.page.pageNum = 1;
      this.page.pageSize = 10;
      this.params = initParams(SearchColumns);
      this.useQuery(this.params, this.page);
    },
    // 选 择
    useRowClick(prop) {
      if (!this.batching) this.selectData = prop;
    },
    // 选 择
    useSelect(prop) {
      if (this.batching) this.selectData = prop;
    },
    // 批 量
    useBatch() {
      this.selectData = [];
      this.batching = !this.batching;
    },
    // 新 增
    async useAdd() {
      const { open } = this.$refs.AddModel;
      await open();
    },
    // 复 制
    async useCopy(prop) {
      const [{ id }] = prop;
      const { open } = this.$refs.AddModel;
      await open(id);
    },
    // 删 除
    async useDelete(prop) {
      const { open } = this.$refs.DeleteModel;
      await open(prop);
    },
    // 编 辑
    async useEdit(prop) {
      const [{ id }] = prop;
      const { open } = this.$refs.EditModel;
      await open(id);
    },
    // 明 细
    async useSee(prop) {
      const { $index } = prop;
      const { open } = this.$refs.SeeModel;
      await open($index);
    },
    // 审 核
    async useSubmit(prop, done) {
      const { open } = this.$refs.SubmitModel;
      await open(prop, done);
    },
  },
};
</script>

<template>
  <el-card v-loading="loading" :body-style="{ padding: 0 }">
    <see-model ref="SeeModel" @success="useQuery(params, page)"></see-model>
    <add-model ref="AddModel" @success="useReset"></add-model>
    <edit-model ref="EditModel" @success="useQuery(params, page)"></edit-model>
    <submit-model
      ref="SubmitModel"
      @success="useQuery(params, page)"
    ></submit-model>
    <delete-model
      ref="DeleteModel"
      @success="useQuery(params, page)"
    ></delete-model>
    <el-super-search
      v-model="params"
      :size="size"
      :dict="dict"
      :columns="SearchColumns"
      @submit="useQuery(params, page)"
    ></el-super-search>
    <div style="padding: 0 20px; display: flex; justify-content: space-between">
      <div>
        <el-button :size="size" @click="useQuery(params, page)">
          查 询
        </el-button>
        <el-button :size="size" @click="useReset">重 置</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button :size="size" @click="useAdd">新 增</el-button>
        <el-button
          v-show="$power.copy"
          :size="size"
          @click="useCopy(selectData)"
        >
          复 制
        </el-button>
        <el-button
          v-show="$power.edit"
          :size="size"
          @click="useEdit(selectData)"
          >编 辑</el-button
        >
        <el-button
          v-show="$power.delt"
          :size="size"
          @click="useDelete(selectData)"
          >删 除</el-button
        >
        <el-button
          v-show="$power.subm"
          :size="size"
          @click="useSubmit(selectData)"
          >审 核</el-button
        >
      </div>
      <div>
        <el-button :size="size" @click="useBatch"> 批 量 </el-button>
        <el-divider direction="vertical"></el-divider>
        <el-hide-table-column-button
          v-model="TableColumns"
          :size="size"
        ></el-hide-table-column-button>
      </div>
    </div>
    <el-super-table
      v-model="tableData"
      :size="size"
      :dict="dict"
      :columns="TableColumns"
      @row-dblclick="useSee"
      @selection-change="useSelect"
      @row-click="useRowClick([$event])"
    >
      <el-table-column
        v-if="batching"
        fixed
        width="55"
        align="center"
        type="selection"
        :selectable="setSelectable"
      >
      </el-table-column>
    </el-super-table>
    <pagination
      v-if="tableData.length"
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="useQuery(params, page)"
    />
  </el-card>
</template>
<style scoped lang="scss">
.el-card {
  width: calc(100% - 20px);
  height: 100%;
  margin: 10px;
  padding: 0 0 20px 0;
}
</style>