hjjc-workbench-web/src/views/achievements/components/addPlanEvaluate.vue

<template>
  <div>
    <el-drawer
      size="46%"
      :title="type === 1 ? '年中绩效指标' : '年末绩效指标'"
      :visible.sync="isShow"
      direction="rtl"
    >
      <xy-table
        ref="table"
        :list="list"
        :table-item="table"
        :default-expand-all="false"
        @expand-change="expandChange"
      >
        <template v-slot:btns> </template>
      </xy-table>
    </el-drawer>
  </div>
</template>

<script>
import { index } from "@/api/budget/planTarget";
import { save, show, index as evaluateIndex } from "@/api/achievements/evaluate"
import { resetSelect } from "@/utils";
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      isShow: false,
      type: 1,
      action: process.env.VUE_APP_UPLOAD_API,

      list: [],
      table: [
        {
          type: "expand",
          width: 80,
          label: "自评展开",
          expandFn: ({ row, $index, store }) => {
            return (
              <div class="expand">
                <el-form
                  ref={`expand-form${$index}`}
                  props={{ model: row._form }}
                  label-width="80px"
                >
                  <el-form-item label="自评值" required={true}>
                    <el-input
                      type="textarea"
                      autosize={{
                        minRows: 3,
                      }}
                      v-model={row._form.result}
                      size="small"
                      placeholder="请输入自评值"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="备注">
                    <el-input
                      type="textarea"
                      autosize={{
                        minRows: 3,
                      }}
                      v-model={row._form.remark}
                      size="small"
                      placeholder="请输入备注"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="文件">
                    <el-upload
                      style="width: 300px"
                      ref={`expand-form-upload${$index}`}
                      multiple={true}
                      headers={{
                        Authorization: "Bearer " + getToken(),
                      }}
                      before-upload={this.uploadBefore}
                      props={{
                        onSuccess: (response, file, fileList) => {
                          this.successHandle(response, file, fileList, row);
                        },
                        onRemove: (file, fileList) => {
                          this.removeHande(file, fileList, row);
                        },
                      }}
                      accept="application/x-rar-compressed,application/zip,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
                      action={this.action}
                      file-list={row._fileList}
                      auto-upload={false}
                    >
                      <el-button slot="trigger" size="small" type="primary">
                        选取文件
                      </el-button>
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="success"
                        on={{
                          ["click"]: (e) =>
                            this.$refs[`expand-form-upload${$index}`].submit(),
                        }}
                      >
                        开始上传
                      </el-button>
                      <div slot="tip" className="el-upload__tip">
                        支持文件格式：.rar .zip .doc .docx .pdf
                        <br />
                        单个文件不能超过500kb
                      </div>
                    </el-upload>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      on={{
                        ["click"]: (e) => {
                          row._form.file_ids = row._fileList?.map(i => i.response.id)
                          save(row._form).then(res => {
                            this.$message({
                              type: "success",
                              message: "操作成功"
                            })
                          })
                        },
                      }}
                    >
                      立即创建
                    </el-button>
                    <el-button
                      on={{
                        ["click"]: (e) => {
                          this.$refs["table"].toggleRowExpansion(row, false);
                          resetSelect(row._form);
                        },
                      }}
                    >
                      取消
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            );
          },
        },
        {
          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,
        },
      ],
      select: {
        page: 1,
        page_size: 999,
        plan_id: "",
      },
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    getPlanId() {
      return this.select.plan_id;
    },
    setPlanId(plan_id) {
      this.select.plan_id = plan_id;
    },

    //上传
    successHandle(response, file, fileList, row) {
      row._fileList = fileList;
    },
    removeHande(file, fileList, row) {
      row._fileList = fileList;
    },
    uploadBefore(file) {
      console.log(file);
      if (file.size / 1024 > 500) {
        this.$message({
          type: "warning",
          message: "上传文件大小超过500kb！",
        });
        return false;
      }
    },

    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,
        };
      }
    },

    expandChange({ row, expanded }) {
      console.log(row, expanded)
      if(expanded.indexOf(row) !== -1) {
        evaluateIndex({
          type: this.type,
          plan_target_id: row.id
        }).then(res => {
          res.data.length > 0 ? this.$integrateData(row._form,res.data[0]) : ''
          row._fileList = res.data[0]?.files?.map(i => {
            return {
              name: i.name,
              url: i.url,
              response: {
                id: i.id
              }
            }
          })
        })
        // show({ id:2 }).then(res => {
        //   this.$integrateData(row._form,res)
        //   row._fileList = res.files.map(i => {
        //     return {
        //       name: i.name,
        //       url: i.url,
        //       response: {
        //         id: i.id
        //       }
        //     }
        //   })
        // })
      }
    },

    async getList() {
      const res = await index(this.select);
      this.list = res.data.map((item) => {
        return {
          _form: {
            id: "",
            result: "",
            remark: "",
            type: this.type,
            file_ids: [],
            plan_id: this.getPlanId(),
            plan_target_id: item.id,
          },
          _fileList: [],
          ...item,
        };
      });

      console.log(this.list);
    },

    submit() {},
  },
  computed: {},
  watch: {
    isShow(val) {
      if (val) {
        this.getList();
      } else {
      }
    },
  },
};
</script>

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