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="#ECAB56">
          <WarningFilled/>
        </el-icon>
        <span class="ml-5">项目总投资额87847万元</span>
      </div>
      <div class="flex ml-20">
        <div v-for="(item,index) in stage" :class="active === index ? 'total-s' : 'total'"
             class="flex flex-col flex-align-start flex-center mt-20 bold font-16" @click="switchTab(item,index)">
          <span class="ml-15 sp">{{ item.name }}</span>
          <span class="ml-15 sp1 mt-5">{{ item.projectNumber }}<span class="grey font-14 ml-5">个</span></span>
        </div>
      </div>
      <base-button class="ml-20 mt-20" icon="Plus" title="新增" @click="showAdd = true"/>
    </div>
    <avue-crud ref="crud"
               v-model="form"
               :before-open="beforeOpen"
               :data="data"
               :option="option"
               :page.sync="page"
               :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 v-model="projectForm" class="lab mt-20" label-width="100px">
          <div class="flex flex-center flex-col mr-20">
            <el-form-item class="full-width" label="项目名称">
              <el-input
                  v-model="projectForm.name"
                  clearable
                  placeholder="输入项目名称"
              />
            </el-form-item>
            <el-form-item class="full-width" label="项目总投">
              <el-input
                  v-model="projectForm.totalAmount"
                  clearable
                  placeholder="输入项目总投"
              />
            </el-form-item>
            <el-form-item class="full-width" label="项目类型">
              <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="项目标签">
              <el-select
                  v-model="projectForm.tags"
                  clearable
                  placeholder="选择项目标签"
                  style="width: 100%"
              />
            </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";

export default {
  name: 'dash',
  components: {BaseButton},
  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
          },
          {
            label: '项目类型',
            prop: 'projectTypeName',
            width: 240
          },
          {
            label: '项目领域',
            prop: 'dictName',
          },
          {
            label: '发债时间',
            prop: 'issueDate',
            type: 'month',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM'
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            type: 'month',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd'
          }]
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      stage: [],
      typeList: [],
      projectForm: {
        name: '',
        totalAmount: '',
        projectType: '',
        tags: '',
        introduction: '',
      }
    }
  },
  created() {
    this.getStageList()
    this.getTypeList()
    this.$bus.on('serach', (res) => {
      this.onLoad(res)
    })
  },
  methods: {
    switchTab(item, index) {
      this.active = index
      this.onLoad({stageId: item.id})
    },
    // track(id) {
    //   this.$router.push({
    //     path: '/home/details',
    //     query: {id: id, type: '1'}
    //   })
    // },
    onLoad(query = {}) {
      let data = {...query, ...this.page}
      this.$api.project.projectList(data).then(res => {
        if (res.code === 200) {
          this.data = res.data.content
          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'}
        })
      } else if (type === 'edit') {
        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
      })
    },
    projectSave() {
      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;
  color: #ECAB56;
  font-weight: 500;
  flex-wrap: nowrap;
  margin-left: 20px;
}

.total-s {
  width: 170px;
  height: 70px;
  border: 1px solid #AC1F1D;
  border-radius: 10px;
  margin-right: 40px;
  box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);

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

  .sp1 {
    color: #ECAB56;
  }
}

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

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

  .sp1 {
    color: #AC1F1D;
  }
}

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