yos_web/src/Form/projectTask/edit copy.vue

<template>
  <div>
    <el-button size="mini" type="primary" @click="onShow(drawer = true)">编 辑</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl"
      append-to-body
      size="80%">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" class="demo-form-inline" size="small" label-position="rigth" label-width="90px">
            <el-col :span="20">
              <el-form-item  style="width:100%" label="工作任务">
                <el-input style="width:100%" v-model="form.taskname" placeholder="输入工作任务"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="排序">
                <el-input v-model="form.sequence"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="关键任务">
                <el-radio-group class="inline-16" v-model="form.important">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>

                <div class="inline-16">
                  <el-checkbox disabled v-model="form.onparties" :true-label="1" :false-label="0" @change="onPartiesChange">关联客户对象</el-checkbox>
                  <!-- <AssociateCustomerObject ref="onparties" :data="form" class="inline-16" style="margin-left: 10px" @selectObject="selectObject"></AssociateCustomerObject> -->
                </div>
                <div class="inline-16">
                  <el-checkbox disabled v-model="form.onstage" :true-label="1" :false-label="0" style="font-size: 14px" @change="onOnstageChange">关联项目阶段</el-checkbox>
                  <!-- <AssociatedProjectPhases ref="onstage" :data="form" class="inline-16" style="margin-left: 10px" @selectStage="selectStage"></AssociatedProjectPhases> -->
                </div>
              </el-form-item>
            </el-col>
            
          </el-form>
        </el-row>
        <div class="normal-margin">
          <div class="normal-margin flex-align-center flex-between">
            <p class="normal-title">评估项</p>
            <!-- <el-button type="primary" size="small" @click="addOptions">添加任务</el-button> -->
          </div>
          <el-table
              :data="form.projtaskmag_options"
              style="width: 100%"
              @row-click="rowClick"
              :row-class-name="tableRowClassName"
              highlight-current-row
              border>
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
                prop="optionname"
                label="任务内容"
                width="360">
              <template slot-scope="scope">
                <el-input v-model="scope.row.optionname" placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="remarks"
                label="描述"
                width="0">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="score"
                width="160"
                label="独立项分值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.score" placeholder=""></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="operation"
                width="100"
                label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="mini" :disabled="form.projtaskmag_options.length === 1" @click="deleteOption(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <p class="normal-title normal-margin">关联设置({{activeOptions}})</p>
          <el-table
            :data="optionscore"
            border
            style="width: 100%">
            <el-table-column
                v-if="form.onparties"
                prop="partiestype"
                label="客户对象"
                >
            </el-table-column>
            <el-table-column
                v-if="form.onstage"
                prop="stagename"
                label="项目阶段"
                >
            </el-table-column>
            <el-table-column
                prop="score"
                label="分值">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.score" placeholder="" @change="onScoreChange"></el-input>
                  <!-- <input type="text" v-model="scope.row.score" @input="onScoreChange"> -->
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import AssociateCustomerObject from '@/HDrpManagement/projectTask/modules/AssociateCustomerObject.vue'
  import AssociatedProjectPhases from '@/HDrpManagement/projectTask/modules/AssociatedProjectStage.vue'
  export default {
    components:{
      AssociateCustomerObject,
      AssociatedProjectPhases
    },
    data () {
      return {
        drawer:false,
        show:true,
        form:{
          "sa_projtaskmagid": 0,
          "taskname": "",
          "sequence": 0,
          "important": 0,
          "onparties": 0,
          "onstage": 0,
          "projtaskmag_options": []
        },
        oldData:[],
        oldStage:[],
        optionscore:[],
        optionscoreStr:'',
        n_index:null,
        activeOptions:null
      }
    },
    methods:{
      onShow () {
        this.queryData()
      },
      async queryData () {
        const res = await this.$api.requested({
          "id": 20221128144104,
          "content": {
            "sa_projtaskmagid":this.$route.query.id
          }
        })
        this.form = res.data
      },
      selectObject (val) {
        this.oldData = val
        if (val.length === 0) {
          this.form.onparties = 0
        } else {
          if (this.oldStage.length > 0) {
            let arr = []
            this.oldData.forEach(e=>{
              this.oldStage.forEach(vl=>{
                arr.push({
                  sa_projtaskmag_optionscoreid:0,
                  partiestype:e.partiestype,
                  stagename:vl.stagename,
                  sa_projstagemagid:vl.sa_projstagemagid,
                  score:0
                })
              })
            })
            this.optionscore = arr.sort()
          } else {
            this.optionscore = val
          }
        }
      },
      selectStage (val) {
        this.oldStage = val
        if (val.length === 0) {
          this.form.onstage = 0
        } else {
           if (this.oldData.length > 0) {
              let arr = []
              this.oldData.forEach(e=>{
                this.oldStage.forEach(vl=>{
                  arr.push({
                    sa_projtaskmag_optionscoreid:0,
                    partiestype:e.partiestype,
                    stagename:vl.stagename,
                    sa_projstagemagid:vl.sa_projstagemagid,
                    score:0
                  })
                })
              })
              this.optionscore = arr.sort()
            } else {
              this.optionscore = val
            }
        }
      },
      rowClick (row, column, event) {
        try {
          this.n_index = row.index
          this.activeOptions = this.form.projtaskmag_options[this.n_index].optionname
          this.optionscore = this.form.projtaskmag_options[row.index].projtaskmag_optionscore
        } catch (error) {
          
        }
        
      },
      onScoreChange (row) {
        if (!this.activeOptions) return this.$message({
          message:'请先点击要设置的任务行',
          type:'error'
        })
        this.form.projtaskmag_options[this.n_index].projtaskmag_optionscore = this.optionscore
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并行列产品名字相同合并（计算组长度以内的列，需要进行合并操作的列）
      let mergeLength = 1;//需要进行横纵合并的列
      if (columnIndex < mergeLength) {
        let finArray = [1,1];
        // 处理行数据
        let cgname = Object.keys(row)[columnIndex]
        console.log(cgname,'---')
        // let cgname = 'value'
        if(rowIndex === 0 || row[cgname] !== this.optionscore[rowIndex-1][cgname]){
          let rowspan = 1;
          //计算需要进行合并操作的行
          for(let i=0; i<this.optionscore.length-1; i++){
            // 只合并连续的
            if(this.optionscore[i][cgname] === row[cgname] && this.optionscore[i+1][cgname] === row[cgname]){
              rowspan ++;
            }
          }
          finArray[0] = rowspan;
        }else {
          finArray[0] = 0;
        }

        // 处理列数据
        let colkeys = Object.keys(row);
        let cgvalue = Object.values(row)[columnIndex]
        if(columnIndex ===0 || row[colkeys[columnIndex-1]] !== row[colkeys[columnIndex]]){
          let colspan = 1;
          //计算需要进行合并操作的列
          for(let i=columnIndex; i<mergeLength; i++) {
            // 只合并连续的
            if (row[colkeys[i]]===cgvalue && row[colkeys[i+1]]===cgvalue && i+1<mergeLength) {
              colspan ++;
            }
          }
          finArray[1] = colspan;
        } else {
          finArray[1] = 0;
        }
        return finArray
      }
      },
      refreshTable() {
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 1000);
      },
      onPartiesChange (val) {
        if (val === 1) {
          let arr = []

          this.$refs.onparties.drawer = true
          this.optionscore = arr.sort()
        } else {
          this.oldData = []
          const res = new Map();
          this.optionscore = this.optionscore.filter((item) => !res.has(item['stagename']) && res.set(item['stagename'], 1));
          this.form.projtaskmag_options.forEach(e=>{
            e.projtaskmag_optionscore = this.optionscore
          })
        }
      },
      onOnstageChange (val) {
        if (val === 1) {
          this.$refs.onstage.drawer = true
        } else {
          this.oldStage = []
          const res = new Map();
          this.optionscore = this.optionscore.filter((item) => !res.has(item['partiestype']) && res.set(item['partiestype'], 1));
          this.form.projtaskmag_options.forEach(e=>{
            e.projtaskmag_optionscore = this.optionscore
          })
        }
      },
      tableRowClassName({row,rowIndex}) {
        row.index = rowIndex
      },
      addOptions(){
        this.form.projtaskmag_options.push({
          "sa_projtaskmag_optionsid": 0,
          "optionname": "",
          "remarks": "",
          "score": 0,
          "projtaskmag_optionscore": {
            "sa_projtaskmag_optionscoreid":0,
            "partiestype": "",
            "sa_projstagemagid": "",
            "score": 0
          }
        })
      },
      async onSubmit () {
        const res = await this.$api.requested({
          "id": "20221128144204",
          "content":this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.drawer = false
        })
      },
      deleteOption (index) {
        this.form.projtaskmag_options = this.form.projtaskmag_options.filter((e,idx)=>{
          if (index !== idx) return e
        })
        this.activeOptions = ''
        console.log(this.form.projtaskmag_options)
      }
    }
  }
</script>