工作台内容提交

longyvfengyun

2022-07-15 c1af8fd99450c2a05f92ffaafbdeb3dd2e4b11ad

工作台内容提交

 src/pages/drawManage/drawCenter/DrawCenter.vue

@@ -4,7 +4,6 @@
      :data-source="dataSource"
      :columns="columns"
      :loading="loading"

      title="图纸中心"
      row-key="name"
      @search="onSearch"

 src/pages/workplace/WorkPlace.vue

@@ -1,122 +1,84 @@
<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{welcome.timeFix[lang]}}，{{currUser.name}}，{{welcome.message[lang]}}</div>
      <div>{{currUser.position[lang]}}</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" :title="$t('project')" content="56"/>
      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
      <head-info class="split-right" :title="$t('visit')" content="2,223"/>
    </template>
    <template>
      <a-row style="margin: 0 -12px">
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')" :body-style="{padding: 0}">
            <a slot="extra">{{$t('all')}}</a>
            <div>
              <a-card-grid :key="i" v-for="(item, i) in projects">
                <a-card :bordered="false" :body-style="{padding: 0}">
                  <a-card-meta :description="item.desc">
                    <div slot="title" class="card-title">
                      <a-avatar size="small" :src="item.logo" />
                      <span>Alipay</span>
                    </div>
                  </a-card-meta>
                  <div class="project-item">
                    <a class="group" href="/#/">科学搬砖组</a>
                    <span class="datetime">9小时前</span>
                  </div>
                </a-card>
              </a-card-grid>
            </div>
          </a-card>
          <a-card :loading="loading" :title="$t('dynamic')" :bordered="false">
            <a-list>
              <a-list-item :key="index" v-for="(item, index) in activities">
                <a-list-item-meta>
                  <a-avatar slot="avatar" :src="item.user.avatar" />
                  <div slot="title" v-html="item.template" />
                  <div slot="description">9小时前</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div class="item-group">
              <a>操作一</a>
              <a>操作二</a>
              <a>操作三</a>
              <a>操作四</a>
              <a>操作五</a>
              <a>操作六</a>
              <a-button size="small" type="primary" ghost icon="plus">{{$t('add')}}</a-button>
            </div>
          </a-card>
          <a-card :loading="loading" :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div style="min-height: 400px;">
              <radar />
            </div>
          </a-card>
          <a-card :loading="loading" :title="$t('team')" :bordered="false">
            <div class="members">
              <a-row>
                <a-col :span="12" v-for="(item, index) in teams" :key="index">
                  <a>
                    <a-avatar size="small" :src="item.avatar" />
                    <span class="member">{{item.name}}</span>
                  </a>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </template>
  </page-layout>
  <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>
      </a-col>
    </a-row>
    <a-card style="margin-top: 8px">
      <my-draw></my-draw>
    </a-card>
  </div>

</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import HeadInfo from '@/components/tool/HeadInfo'
import Radar from '@/components/chart/Radar'
import {mapState} from 'vuex'
import {request, METHOD} from '@/utils/request'

import MyDraw from "./myDraw";
import TotalCard from "./totalCard";
export default {
  name: 'WorkPlace',
  components: {Radar, HeadInfo, PageLayout},
  i18n: require('./i18n'),
  data () {
  components: {
    MyDraw,
    TotalCard
  },
  data() {
    return {
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      }
      loading: false,
      totals: [
        {
          title: "我的图纸",
          type: "",
          value: 10
        },
        {
          title: "未审批",
          type: "warning",
          value: 20
        },
        {
          title: "已驳回",
          type: "danger",
          value: 2
        },
        {
          title: "已审批",
          type: "success",
          value: 10
        },
      ],
      columns: [
        {
          title: '图纸编码',
          dataIndex: 'name',
          key: 'name',
          align: "center",
          searchAble: true
        },
        {
          title: '图纸类型',
          dataIndex: 'type',
          key: 'type',
          align: "center",
          searchAble: true,
          dataType: 'select',
          search: {
            selectOptions: []
          }
        },
      ],
      dataSource: [],
    }
  },
  computed: {
    ...mapState('account', {currUser: 'user'}),
    ...mapState('setting', ['lang'])
  methods: {
    changeTotalCard(info) {
      console.log(info);
    }
  },
  created() {
    request('/user/welcome', METHOD.GET).then(res => this.welcome = res.data)
    request('/work/activity', METHOD.GET).then(res => this.activities = res.data)
    request('/work/team', METHOD.GET).then(res => this.teams = res.data)
    request('/project', METHOD.GET).then(res => {
        this.projects = res.data
        this.loading = false
      })
  }
}
</script>

<style lang="less">
@import "index";
</style>
<style scoped>
.work-place {
  padding-top: 8px;
}
</style>

 src/pages/workplace/myDraw/MyDraw.vue

New file
@@ -0,0 +1,123 @@
<template>
  <div class="my-draw">
    <a-button type="primary" size="small">新建图纸</a-button>
    <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>
  </div>
</template>

<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
export default {
  name: "MyDraw",
  components: {
    AdvanceTable,
  },
  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("查询后台返回参数");
    },
  }
}
</script>

<style scoped>

</style>

 src/pages/workplace/myDraw/index.js

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

 src/pages/workplace/totalCard.vue

New file
@@ -0,0 +1,56 @@
<template>
  <a-card>
    <div class="total-title">{{ title }}</div>
    <div class="total-num" :class="type">{{ num }}</div>
  </a-card>
</template>

<script>
export default {
  name: "totalCard",
  props: {
    title: {
      type: String,
      default: "",
    },
    num: {
      type: [String, Number],
      default: 0
    },
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
}
</script>

<style scoped>
.total-title {
  font-size: 20px;
  font-weight: bold;
}
.total-num {
  text-align: center;
  font-weight: bold;
  font-size: 26px;
}
.total-num:hover {
  cursor: pointer;
}
.total-num.primary {
  color: #409EFF;
}
.total-num.success {
  color: #67C23A;
}
.total-num.warning {
  color: #E6A23C;
}
.total-num.danger {
  color: #F56C6C;
}
</style>