切换动画

longyvfengyun

2022-07-15 3c1fed1061d96cf65f5a5be66f7a8b559ec6bd20

切换动画

 src/pages/workplace/WorkPlace.vue

@@ -2,45 +2,52 @@
  <div class="work-place">
    <a-row :gutter="18">
      <a-col :span="6" v-for="(item, key) in totals" :key="'key'+key">
        <total-card :type="item.type" :title="item.title" :num="item.value" @click="changeTotalCard(item)"></total-card>
        <total-card :info="item" :type="item.type" :title="item.title" :num="item.value" @click="changeTotalCard"></total-card>
      </a-col>
    </a-row>
    <a-card style="margin-top: 8px">
      <my-draw></my-draw>
    </a-card>
    <div style="margin-top: 8px">
      <my-draw :is-show="'myDraw'==cardName"></my-draw>
      <not-approved :is-show="'notApproved'==cardName"></not-approved>
    </div>
  </div>

</template>

<script>
import MyDraw from "./myDraw";
import TotalCard from "./totalCard";
import NotApproved from "@/pages/workplace/notApproved/NotApproved";
export default {
  name: 'WorkPlace',
  components: {
    NotApproved,
    MyDraw,
    TotalCard
  },
  data() {
    return {
      loading: false,
      cardName: "myDraw",
      totals: [
        {
          name: "myDraw",
          title: "我的图纸",
          type: "",
          value: 10
        },
        {
          name: "notApproved",
          title: "未审批",
          type: "warning",
          value: 20
        },
        {
          name: "notApproved",
          title: "已驳回",
          type: "danger",
          value: 2
        },
        {
          name: "notApproved",
          title: "已审批",
          type: "success",
          value: 10
@@ -71,7 +78,7 @@
  },
  methods: {
    changeTotalCard(info) {
      console.log(info);
      this.cardName = info.name;
    }
  },
}

 src/pages/workplace/myDraw/MyDraw.vue

@@ -1,11 +1,10 @@
<template>
  <div class="my-draw">
    <a-button type="primary" size="small">新建图纸</a-button>
  <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="图纸中心"
        title=""
        row-key="name"
        @search="onSearch"
        @refresh="onRefresh"
@@ -22,20 +21,32 @@
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
      <template slot="title">
        <a-button type="primary" size="small">新建图纸</a-button>
      </template>
      <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>
  </div>
  </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: "MyDraw",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    PageToggleTransition,
    AdvanceTable,
  },
  data() {
@@ -114,7 +125,10 @@
    searchData() {
      console.log("查询后台返回参数");
    },
  }
  },
  computed: {
    ...mapState('setting', ['animate']),
  },
}
</script>


 src/pages/workplace/notApproved/NotApproved.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: "NotApproved",
  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/notApproved/index.js

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

 src/pages/workplace/totalCard.vue

@@ -1,7 +1,7 @@
<template>
  <a-card>
    <div class="total-title">{{ title }}</div>
    <div class="total-num" :class="type">{{ num }}</div>
    <div class="total-num" :class="type" @click="handleClick">{{ num }}</div>
  </a-card>
</template>

@@ -9,6 +9,12 @@
export default {
  name: "totalCard",
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    title: {
      type: String,
      default: "",
@@ -25,6 +31,11 @@
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit("click", this.info);
    }
  }
}
</script>

@@ -34,6 +45,7 @@
  font-weight: bold;
}
.total-num {
  user-select: none;
  text-align: center;
  font-weight: bold;
  font-size: 26px;