wt_project_web_bak/src/views/home/component/dash.vue

<template>
  <div class="full-height full-width flex flex-col">
    <div class="white-bg flex flex-col padding">
      <div class="flex flex-align-center tip">
        <el-icon class="ml-20" color="#BC002D">
          <WarningFilled/>
        </el-icon>
        <span class="ml-5">项目总投资额<span
            class="main-color bold">{{ Number.parseFloat(num).toLocaleString() }}</span>万元</span>
      </div>
      <div class="flex ml-20 hide-scrollbar" style="overflow-x: scroll;width: 86vw">
        <div v-for="(item,index) in stage" :key='item.id' :class="active === index ? 'total-s' : 'total'"
             class="flex flex-col  flex-center mt-20 bold font-16 pointer"
             @click="switchTab(item,index)">
          <span class=" sp">{{ item.name }}</span>
          <span class=" sp1 mt-5">{{ item.projectNumber }}<span class="grey font-14 ml-5">个</span></span>
        </div>
      </div>
      <base-button v-if='permissions.permissions.projectAdd' class="ml-20 mt-20" icon="Plus" title="新增"
                   @click="showAdd = true"/>
    </div>
    <avue-crud ref="crud"
               v-model="form"
               :page="page"
               :before-open="beforeOpen"
               :data="data"
               :option="option"
               :permission="permissionList"
               :table-loading="loading"
               class="curd"
               @row-del="rowDel"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <!--      <template #menu="{row}">-->
      <!--        <el-button icon="Operation" text @click="track(row.id)">跟踪审计</el-button>-->
      <!--      </template>-->
    </avue-crud>
    <el-dialog v-model="showAdd"
               append-to-body
               center
               title="新增项目"
               width="35%">
      <div>
        <el-form ref='form' :model="projectForm" class="lab mt-20" label-width="100px" :rules="rules">
          <div class="flex flex-center flex-col mr-20">
            <el-form-item class="full-width" label="项目名称" prop='name'>
              <el-input
                  v-model="projectForm.name"
                  clearable
                  placeholder="输入项目名称"
              />
            </el-form-item>
            <el-form-item class="full-width" label="项目总投" prop='totalAmount'>
              <el-input
                  v-model="projectForm.totalAmount"
                  clearable
                  placeholder="输入项目总投(万元)"
              >
                <template #append>(万元)</template>
              </el-input>
            </el-form-item>
            <el-form-item class="full-width" label="项目类型" prop='projectType'>
              <el-select
                  v-model="projectForm.projectType"
                  clearable
                  placeholder="选择项目类型"
                  style="width: 100%"
              >
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="项目标签" prop='tags'>
              <el-select
                  v-model="projectForm.tags"
                  clearable
                  placeholder="选择项目标签"
                  style="width: 100%"
              >
                <el-option
                    v-for="item in tagsList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="建设内容">
              <el-input
                  v-model="projectForm.introduction"
                  :rows="6"
                  clearable
                  placeholder="输入项目建设内容"
                  type="textarea"
              />
            </el-form-item>
            <div class="flex flex-center mt-10">
              <base-button class="mr-20" icon="Close" title="取消" type="0" @click="showAdd = false"/>
              <base-button icon="Check" title="保存" @click="projectSave"/>
            </div>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseButton from '../../../components/base-button.vue'
import permissionStore from '@/store/permission.js'
import { vaildData } from '@/utils/tools.js'

export default {
  name: 'dash',
  components: { BaseButton },
  setup () {
    const permissions = permissionStore()
    return { permissions }
  },
  data () {
    return {
      showAdd: false,
      active: 0,
      loading: false,
      data: [],
      form: {},
      option: {
        calcHeight: 230,
        refreshBtn: false,
        tip: false,
        columnBtn: false,
        searchShow: true,
        editBtn: true,
        editBtnText: '跟踪审计',
        editBtnIcon: 'Operation',
        addBtn: false,
        delBtn: true,
        border: true,
        index: true,
        align: 'center',
        viewBtn: true,
        menuWidth: 320,
        dialogClickModal: false,
        column: [
          {
            label: '项目名称',
            prop: 'name',
            addDisplay: false,
            editDisplay: false,
            width: 400
          },
          {
            label: '项目总投资（万元）',
            prop: 'totalAmount',
            width: 180,
            type: 'number',
            precision: 2,
            formatter: (val, value, label) => {
              return val.totalAmount.toLocaleString()
            }
          },
          {
            label: '项目类型',
            prop: 'projectTypeName',
            type: 'select',
            width: 240,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=project-tags',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '项目领域',
            prop: 'dictName',
            width: 240
          },
          {
            label: '发债时间',
            prop: 'issueDate',
            type: 'month',
            width: 240,
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM'
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            type: 'month',
            width: 240,
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd'
          }]
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      stage: [],
      typeList: [],
      tagsList: [],
      num: '',
      projectForm: {
        name: '',
        totalAmount: '',
        projectType: '',
        tags: '',
        introduction: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        projectType: [
          {
            required: true,
            message: '请选择项目类型',
            trigger: 'change'
          }
        ],
        tags: [
          {
            required: true,
            message: '请选择项目标签',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created () {
    this.getStageList()
    this.getTypeList()
    this.$bus.on('serach', (res) => {
      this.onLoad(res)
    })
  },
  computed: {
    permissionList () {
      return {
        delBtn: vaildData(this.permissions.permissions.home_del, false)
      }
    }
  },
  methods: {
    switchTab (item, index) {
      this.active = index
      this.onLoad({ stageId: item.id === -1 ? '' : item.id })
    },
    // track(id) {
    //   this.$router.push({
    //     path: '/home/details',
    //     query: {id: id, type: '1'}
    //   })
    // },
    onLoad (query = {}) {
      this.loading = true
      const data = { ...query, ...this.page }
      this.$api.project.projectList(data).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.data = res.data.content
          this.num = res.msg
          this.page.total = res.data.numberOfElements
          this.loading = false
        }
      })
    },
    beforeOpen (done, type) {
      if (['view'].includes(type)) {
        this.$router.push({
          path: '/home/details',
          query: { id: this.form.id, type: '0', ownerId: this.form.createUser }
        })
      } else if (type === 'edit') {
        this.$alert('功能建设中，尽情期待...', '消息提醒', {
          confirmButtonText: 'OK'
        })
        // this.$router.push({
        //   path: '/home/details',
        //   query: { id: this.form.id, type: '1' }
        // })
      }
    },
    currentChange (currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    rowDel (row) {
      this.$confirm('确定删除选择的项目?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api.project.projectRemove({ ids: row.id }).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.onLoad()
            } else {
              this.$message.error(res.msg)
            }
          })
        })
    },
    getStageList () {
      this.$api.project.userStageList().then(res => {
        if (res.code === 200) {
          this.stage = res.data
        }
      })
    },
    getTypeList () {
      this.$api.project.typeList().then(res => {
        this.typeList = res.data.records
      })
      this.$api.common.dicList({ code: 'project-tags' }).then(res => {
        if (res.code === 200) {
          this.tagsList = res.data
        }
      })
    },
    projectSave () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$api.project.projectAdd(this.projectForm).then(res => {
            if (res.code === 200) {
              this.showAdd = false
              this.$message.success(res.msg)
              this.onLoad()
            } else {
              this.showAdd = false
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  width: 260px;
  height: 38px;
  background-color: #FBF6ED;
  font-weight: 500;
  flex-wrap: nowrap;
  margin-left: 20px;
}

.total-s {
  width: 220px;
  height: 70px;
  border: 1px solid #825618;
  border-radius: 10px;
  margin-right: 20px;
  box-shadow: 2px 2px 10px 2px rgba(113, 73, 39, 0.3);

  .sp {
    color: #ECAB56;
    white-space: nowrap;
  }

  .sp1 {
    color: #ECAB56;
  }
}

.total {
  width: 220px;
  height: 70px;
  border-radius: 10px;
  margin-right: 20px;
  background-color: #F0F2F7;

  .sp {
    color: #707070;
    white-space: nowrap;
    margin-right: 20px;
  }

  .sp1 {
    color: #825618;
  }
}

.curd {
  :deep(.avue-crud__menu) {
    min-height: 10px;
  }
}
</style>