qms/src/views/modules/supplier/qmsEvaluationTemplate.vue

<!--
 * @Author: Do not edit
 * @Date: 2023-06-19 10:38:41
 * @LastEditTime: 2023-06-26 16:05:18
 * @LastEditors: DY
 * @Description: 评估模板
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <h1>绩效评估模板</h1>
    <div class="bigDiv">
      <div v-for="(item, index) in dataList" :key="index" class="smallDiv">
        <p style="font-size: 18px">{{ item.name }}</p>
        <div style="margin-top: 30px;">
          <el-row :gutter="20">
            <el-col :span="20">
              <span style="font-size: 18px;">综合评估表</span>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-view" @click="seeeValuationList(item.id)"></i>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="4" :offset="20">
              <i class="el-icon-delete" @click="deleteEvaluation(item.id, item.name)"></i>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div>
      <el-button class="carcleButton" @click="addTemplate">+</el-button>
    </div>
    <div v-if="editModelVisible" style="border: 1px solid grey; padding: 10px">
      <evaluation-template-add @refreshDataList="getDataList" :show="editModelVisible" @info="getInfo"></evaluation-template-add>
    </div>
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      :before-close="handleClose">
      <base-table id="palletTable" :table-props="tableProps" :page="1" :limit="listQuery.limit" :table-data="projectsList" />
    </el-dialog>
  </el-card>
</template>

<script>
import evaluationTemplateAdd from "./components/evaluationTemplate-add.vue"
import i18n from "@/i18n";

const tableProps = [
  {
    prop: "projectTypeName",
    label: i18n.t("supplier.projectTypeName")
  },
  {
    prop: "weight",
    label: i18n.t("supplier.weight")
  },
  {
    prop: "name",
    label: i18n.t("supplier.projectName")
  }
];

export default ({
  components: { evaluationTemplateAdd },
  data() {
    return {
      urlOptions: {
        getDataListURL: "/supplier/qmsEvaluationTemplate/page",
        getProjectTypeURL: '/supplier/qmsEvaluationTemplateProjectType/page',
        deleteURL: '/supplier/qmsEvaluationTemplate'
      },
      dataList: [],
      listQuery: {
        limit: 999,
        page: 1,
        total: 0,
      },
      tableProps,
      projectsList: [],
      addTemplateVisible: false,
      activeStep: 0,
      editModelVisible: false,
      dataListLoading: false,
      dialogVisible: false
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    deleteEvaluation(id, name) {
      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(this.urlOptions.deleteURL, { data: [id] }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    },
    getInfo(value) {
      this.editModelVisible = value
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    seeeValuationList(id) {
      console.log('啊啊啊啊', id)
      this.dialogVisible = true
      this.$http
        .get(this.urlOptions.getProjectTypeURL, {
          params: {
            'limit': 999,
            'page': 1,
            'evaluationTemplateId': id
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.projectsList = [];
            return this.$message.error(res.msg);
          }
          this.projectsList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
     addTemplate() {
      this.editModelVisible = true
    },
    getDataList() {
      // this.dataListLoading = true;
      this.$http
        .get(this.urlOptions.getDataListURL, {
          params: this.listQuery,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.tableData = [];
            this.listQuery.total = 0;
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.list;
          this.listQuery.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    }
  }
})
</script>

<style scoped>
  .bigDiv {
    border: 1px solid grey;
    padding: 20px 5vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .smallDiv {
    border: 1px solid grey;
    padding: 0px 20px;
    width: 40%;
    height: 150px;
    margin: 10px;
  }
  .carcleButton {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: rgb(196, 193, 193);
  }
</style>