工作台基础逻辑

longyvfengyun

2022-07-15 bcedf2b74a50f38b104286176d1096e788863cd5

工作台基础逻辑

 src/pages/workplace/WorkPlace.vue

@@ -8,6 +8,8 @@
    <div style="margin-top: 8px">
      <my-draw :is-show="'myDraw'==cardName"></my-draw>
      <not-approved :is-show="'notApproved'==cardName"></not-approved>
      <rejected-list :is-show="'rejected'==cardName"></rejected-list>
      <approved-list :is-show="'approved'==cardName"></approved-list>
    </div>
  </div>
</template>
@@ -16,9 +18,13 @@
import MyDraw from "./myDraw";
import TotalCard from "./totalCard";
import NotApproved from "@/pages/workplace/notApproved/NotApproved";
import RejectedList from "@/pages/workplace/rejectedList/RejectedList";
import ApprovedList from "@/pages/workplace/approvedList/ApprovedList";
export default {
  name: 'WorkPlace',
  components: {
    ApprovedList,
    RejectedList,
    NotApproved,
    MyDraw,
    TotalCard
@@ -41,13 +47,13 @@
          value: 20
        },
        {
          name: "notApproved",
          name: "rejected",
          title: "已驳回",
          type: "danger",
          value: 2
        },
        {
          name: "notApproved",
          name: "approved",
          title: "已审批",
          type: "success",
          value: 10

 src/pages/workplace/approvedList/ApprovedList.vue

New file
@@ -0,0 +1,134 @@
<template>
  <page-toggle-transition v-if="isShow" :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
    <advance-table
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        title="已审批"
        row-key="name"
        @search="onSearch"
        @refresh="onRefresh"
        @reset="onReset"
        :format-conditions="true"
        :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
      <template slot="action" slot-scope="scope">
        <a @click="scope.record">下载</a>
        <a-divider type="vertical"></a-divider>
        <a @click="scope.record">详情</a>
      </template>
    </advance-table>
  </page-toggle-transition>
</template>

<script>
import PageToggleTransition from "@/components/transition/PageToggleTransition";
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import {mapState} from "vuex";
export default {
  name: "ApprovedList",
  components: {
    PageToggleTransition,
    AdvanceTable,
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 100,
      conditions: {},
      columns: [
        {
          title: '图纸编码',
          dataIndex: 'name',
          key: 'name',
          align: "center",
          searchAble: true
        },
        {
          title: '图纸类型',
          dataIndex: 'type',
          key: 'type',
          align: "center",
          searchAble: true,
          dataType: 'select',
          search: {
            selectOptions: []
          }
        },
        {
          title: '上传日期',
          dataIndex: 'uploadDate',
          key: 'uploadDate',
          align: "center",
        },
        {
          title: '操作',
          dataIndex: "operation",
          key: 'operation',
          align: "center",
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        },
      ],
      dataSource: [],
    }
  },
  methods: {
    show(scope) {
      console.log(scope);
    },
    onSearch(conditions, searchOptions) {
      console.log(conditions);
      console.log(searchOptions);
      this.page = 1
      this.conditions = conditions
      this.searchData();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.searchData();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.searchData();
    },
    onRefresh(conditions) {
      this.conditions = conditions
      this.searchData()
    },
    onReset(conditions) {
      this.conditions = conditions
      this.searchData()
    },
    searchData() {
      console.log("查询后台返回参数");
    },
  },
  computed: {
    ...mapState('setting', ['animate']),
  }
}
</script>

<style scoped>

</style>

 src/pages/workplace/approvedList/index.js

New file
@@ -0,0 +1,2 @@
import ApprovedList from "./ApprovedList";
export default ApprovedList;

 src/pages/workplace/rejectedList/RejectedList.vue

New file
@@ -0,0 +1,134 @@
<template>
  <page-toggle-transition v-if="isShow" :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
    <advance-table
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        title="已驳回"
        row-key="name"
        @search="onSearch"
        @refresh="onRefresh"
        @reset="onReset"
        :format-conditions="true"
        :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
      <template slot="action" slot-scope="scope">
        <a @click="scope.record">下载</a>
        <a-divider type="vertical"></a-divider>
        <a @click="scope.record">详情</a>
      </template>
    </advance-table>
  </page-toggle-transition>
</template>

<script>
import PageToggleTransition from "@/components/transition/PageToggleTransition";
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import {mapState} from "vuex";
export default {
  name: "RejectedList",
  components: {
    PageToggleTransition,
    AdvanceTable,
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 100,
      conditions: {},
      columns: [
        {
          title: '图纸编码',
          dataIndex: 'name',
          key: 'name',
          align: "center",
          searchAble: true
        },
        {
          title: '图纸类型',
          dataIndex: 'type',
          key: 'type',
          align: "center",
          searchAble: true,
          dataType: 'select',
          search: {
            selectOptions: []
          }
        },
        {
          title: '上传日期',
          dataIndex: 'uploadDate',
          key: 'uploadDate',
          align: "center",
        },
        {
          title: '操作',
          dataIndex: "operation",
          key: 'operation',
          align: "center",
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        },
      ],
      dataSource: [],
    }
  },
  methods: {
    show(scope) {
      console.log(scope);
    },
    onSearch(conditions, searchOptions) {
      console.log(conditions);
      console.log(searchOptions);
      this.page = 1
      this.conditions = conditions
      this.searchData();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.searchData();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.searchData();
    },
    onRefresh(conditions) {
      this.conditions = conditions
      this.searchData()
    },
    onReset(conditions) {
      this.conditions = conditions
      this.searchData()
    },
    searchData() {
      console.log("查询后台返回参数");
    },
  },
  computed: {
    ...mapState('setting', ['animate']),
  }
}
</script>

<style scoped>

</style>

 src/pages/workplace/rejectedList/index.js

New file
@@ -0,0 +1,2 @@
import RejectedList from "./RejectedList";
export default RejectedList;