hjjc-workbench-web/src/views/budget/components/addPoint.vue

<template>
  <div>
    <el-drawer
      size="46%"
      title="绩效指标"
      :visible.sync="isShow"
      direction="rtl"
    >
      <Button shape="circle"
              type="primary"
              :style="{
                'margin':'0 0 10px 20px'
              }"
              @click="isShowModal = true">
        目标选择</Button
      >
      <xy-table :list="list" :table-item="table">
        <template v-slot:btns> </template>
      </xy-table>
    </el-drawer>

    <el-dialog title="绩效指标列表" :visible.sync="isShowModal" width="54%">
      <Table
        :data="points"
        :columns="pointTable"
        :loading="loading"
        border
        size="small"
        :span-method="spanMethod"
        @on-selection-change="selectionChange"
      ></Table>
      <div style="display: flex; justify-content: center; margin: 10px 0">
        <Page :total="pointTotal"
              size="small"
              show-elevator
              show-total
              @on-change="e => {
                pointSelect.page = e;
                getPoints();
              }"/>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { index, save, destroy } from "@/api/budget/planTarget";
import { index as pointIndex } from "@/api/achievements/points";
import { resetSelect } from "@/utils";

export default {
  data() {
    return {
      isShow: false,

      list: [],
      table: [
        {
          label: "指标名称",
          prop: "target.name",
          minWidth: 200
        },
        {
          label: "半年（程）指标值",
          prop: "target.half_target",
          width: 180
        },
        {
          label: "全年（程）指标值",
          prop: "target.year_target",
          width: 180
        },
        {
          label: "创建时间",
          prop: "created_at",
          width: 200,
        },
        {
          label: "操作",
          align: "left",
          minWidth: 200,
          customFn: (row) => {
            return (
              <el-popover
                style="margin-left: .4em;"
                placement="top"
                width="160"
                trigger="click"
              >
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text">
                    取消
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    on={{
                      ["click"]: (e) => {
                        destroy({
                          id: row.id,
                        }).then((res) => {
                          this.$message({
                            type: "success",
                            message: "删除成功",
                          });
                          this.getList();
                        });
                      },
                    }}
                  >
                    确定
                  </el-button>
                </div>

                <el-button slot="reference" size="mini" type="danger">
                  删除
                </el-button>
              </el-popover>
            );
          },
        },
      ],
      select: {
        page: 1,
        page_size: 999,
        plan_id: "",
      },

      loading: false,
      isShowModal: false,
      pointSelect: {
        page: 1,
        page_size: 10,
      },
      points: [],
      pointTotal: 0,
      spanArr: [],
      spanArr1: [],
      pos1: 0,
      pos: 0,
      pointTable: [
        {
          type: "selection",
          width: 56,
          align: "center",
        },
        {
          title: "一级指标",
          key: "target_type",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.target_type_detail?.name);
          },
          minWidth: 180,
          align: "center",
        },
        {
          title: "二级指标",
          key: "target_type2",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.target_type2_detail?.name);
          },
          minWidth: 180,
          align: "center",
        },
        {
          title: "三级指标",
          key: "name",
          minWidth: 180,
          align: "center",
        },
        {
          title: "计算符号",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.symbol_detail?.value);
          },
          width: 160,
          align: "center",
        },
        {
          title: "半年（程）指标值",
          key: "half_target",
          width: 200,
          align: "center",
        },
        {
          title: "全年（程）指标值",
          key: "year_target",
          width: 200,
          align: "center",
        },
        {
          title: "单位",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.unit_detail?.value);
          },
          width: 160,
          align: "center",
        },
      ],
      selections: [], //已选择的全部计划


    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    getPlanId() {
      return this.select.plan_id;
    },
    setPlanId(plan_id) {
      this.select.plan_id = plan_id;
    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.key === "target_type") {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (column.key === "target_type2") {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    selectionChange(selection) {
      this.selections = Array.from(
        new Set(
          selection.map((item) => item.id)
        )
      );
      console.log(this.selections);
    },

    async getList() {
      const res = await index(this.select);
      this.list = res.data;
    },

    async getPoints() {
      this.loading = true;
      this.pos = this.pos1 = 0;
      this.spanArr = [];
      this.spanArr1 = [];
      try {
        const res = await pointIndex(this.pointSelect);
        let selectedIds = Array.from(new Set(this.list.map((item) => item.target_id)));
        this.points = res.data.map(item => {
          return {
            ...item,
            _checked: !!selectedIds.find(i => i === item.id) || !!this.selections.find(i => i === item.id),
            _disabled: !!selectedIds.find(i => i === item.id),
          }
        });
        this.pointTotal = res.total;

        for (let i in this.points) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
            this.spanArr1.push(1);
            this.pos1 = 0;
          } else {
            if (
              this.points[i]?.target_type_detail?.name ===
              this.points[i - 1]?.target_type_detail?.name
            ) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

            if (
              this.points[i]?.target_type2_detail?.name ===
              this.points[i - 1]?.target_type2_detail?.name
            ) {
              this.spanArr1[this.pos1] += 1;
              this.spanArr1.push(0);
            } else {
              this.spanArr1.push(1);
              this.pos1 = i;
            }
          }
        }

        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },

    submit() {
      Promise.all(
        this.selections.map((target_id) => {
          return save({
            target_id,
            plan_id: this.getPlanId(),
          });
        })
      ).then((res) => {
        this.getList();
        this.isShowModal = false;
      });
    },

  },
  computed: {},
  watch: {
    isShow(val) {
      if (val) {
        this.getList();
      } else {
      }
    },
    isShowModal(val) {
      if(val){
        this.getPoints();
      }else{
        this.selections = [];
        resetSelect(this.pointSelect);
        this.points = [];
        this.pointTotal = 0;
      }
    }
  },
};
</script>

<style scoped lang="scss"></style>