vue-admin-template/src/views/job/score.vue

<template>
  <el-container class="main-body">
    <el-header height="10%">
      <el-row type="flex" justify="space-around" style="width: 90%">
        <el-col :span="5">
          <el-select
            placeholder="department"
            v-model="department"
            @change="change_curDepartmant"
          >
            <el-option
              v-for="(item, index) in departments"
              :key="item"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select placeholder="job" v-model="job">
            <el-option
              v-for="item in curJobs"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button @click="bindData">查询</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-table
      :data="composed_info"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%"
    >
      <!-- <el-table-column prop="content" label="Content"></el-table-column> -->
      <!-- <template v-for="item in tableItems[navID]">
        <el-table-column
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>
      </template> -->
      <el-table-column>
        <template slot-scope="scope">
          <span
            :style="contentColor(scope.row.modify)"
            @click="showDialog(scope.row)"
            >{{ scope.row.content }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="判断矩阵编辑" :visible.sync="dialogVisible">
      <!-- <el-table
        :data="chosen_row"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :show-header="false"
        style="width: 80%"
      > -->
      <!-- <el-table-column v-for="column in current_matrix">
          <template slot-scope="scope">
            <el-input v-for="value in column" value="1"></el-input>
          </template>
        </el-table-column> -->
      <!-- </span>
        </template>
      </el-table> -->
      <el-row>
        <p v-for="(item,index) in chosen_row[0].content">{{index+1}}.{{item}}</p>
      </el-row>
      <el-row
        v-for="(row, row_index) in current_matrix_obj"
        style="display: flex; justify-content: space-between"
      >
        <input
          v-for="(item, col_index) in current_matrix_obj[row_index].value"

          v-model="current_matrix_obj[row_index].value[col_index].value"
          type="number"
          oninput="if(value.length>1)value=value.slice(0,1)"
          style="width:45px"
          :disabled="col_index===row_index?true:false"
          @input="input_change(event,row_index,col_index)"
        ></input>
      </el-row>
      <el-button style="float:right" @click="postMatrix">提交</el-button>
    </el-dialog>
  </el-container>
</template>

<script>
import * as jobApi from "@/api/job";
export default {
  name: "score",
  data() {
    return {
      departments: [],
      jobs: [],
      curJobs: [],
      department: "部门",
      job: "岗位",

      show_contents: [],
      matrice: [],
      modify: [],
      composed_info: [],

      chosen_row: [{content:''}],
      current_matrix: [],
      current_matrix_obj:[],
      current_number:null,
      dialogVisible: false,
    };
  },
  computed: {
    contentColor(modify) {
      return (modify) => {
        if (modify === 0) return { color: "red" };
        else if (modify === 1) return { color: "green" };
      };
    },
  },
  mounted() {
    jobApi.queryDepartmentJob().then((res) => {
      console.log(res);
      let depathment_job_info = res.data.children;

      for (const item of depathment_job_info) {
        this.departments.push(item.topic);
        console.log(item.topic);
        const jobs = [];
        if (item.children != undefined) {
          for (const job of item.children) {
            jobs.push(job.topic);
          }
          this.jobs.push(jobs);
        } else this.jobs.push([]);
      }
    });
  },
  methods: {
    input_change($event,row,col){
      this.current_matrix_obj[row].value[col].value=event.target.value
      let num=1/event.target.value
      num=num.toFixed(2)
      this.current_matrix_obj[col].value[row].value=num

      this.current_matrix[row][col]=event.target.value
      this.current_matrix[col][row]=num
    },
    change_curDepartmant(num) {
      this.department = this.departments[num];
      this.curJobs = this.jobs[num];
    },
    bindData() {
      jobApi
        .queryScore({ department: this.department, job: this.job })
        .then((res) => {
          let re_content = /^\d+$/;
          let re_matrix = /^\d+_matrix$/;
          let re_modify = /^\d+_modify$/;
          const data = res.data;
          this.show_contents = [];
          this.matrice = [];
          this.modify = [];
          for (let key in data) {
            if (re_content.test(key))
              this.show_contents.push({ name: key, value: data[key] });
            else if (re_matrix.test(key))
              this.matrice.push({ name: key, value: data[key] });
            else if (re_modify.test(key))
              this.modify.push({ name: key, value: data[key] });
          }
        });
      let length = this.modify.length;
      this.composed_info = [];
      for (let i = 0; i < length; i++) {
        this.composed_info.push({
          number:this.show_contents[i].name,
          content: this.show_contents[i].value,
          matrix: this.matrice[i].value,
          modify: this.modify[i].value,
          length: this.show_contents[i].value.length,
        });
      }
      console.log(this.composed_info);
    },
    showDialog(row) {
      this.dialogVisible = true;
      this.current_number=row['number']
      this.chosen_row = [];
      this.chosen_row.push(row);
      this.current_matrix = row["matrix"];
      console.log(this.current_matrix);
      this.current_matrix_obj=[]
      for(let i of this.current_matrix){
        console.log(i)
        let tmp=[]
        for(let j of i){
          tmp.push({value:j})
        }
        this.current_matrix_obj.push({value:tmp})
      }
      console.log(this.current_matrix_obj)
    },
    postMatrix(){
      let matrix=[]
      for(let i of this.current_matrix_obj){
        let tmp=[]
        for(let j of i.value){
          tmp.push(j.value)
        }
        matrix.push(tmp)
      }
      let post_data={}
      post_data.department=this.department
      post_data.job=this.job
      post_data.number=this.current_number
      post_data.data=matrix
      jobApi.saveScore({ params: post_data }).then(
        (res) => {
          if (res.code === 0) {
            Message({
              message: "保存成功",
              type: "success",
              duration: 1 * 1000,
            });
          }
          console.log(res);
        },
        (err) => {
          console.log("err: ", err);
        }
      );
      this.dialogVisible=false
    }
  },
};
</script>

<style scoped></style>