yos_web/src/Form/projectTask/edit.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="selectFormObject"></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="selectFormStage"></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"
              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="deleteOptions(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="act_projtask">
          <p class="normal-title normal-margin">关联设置({{act_projtask?act_projtask.optionname:""}})</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=""></el-input>
                </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": []
        },
        optionscore:[],

        partiesType:[],
        projectStage:[],

        act_projtask:null,

        objects: new Map(),
        stages: new Map(),
        relateForm: []
      }
      
    },
    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
        this.form.projtaskmag_options[0].projtaskmag_optionscore.forEach(e=>{
          this.objects.set(e.partiestype,{ partiestype: e.partiestype})
          this.stages.set(e.stagename,{stagename: e.stagename, sa_projstagemagid: e.sa_projstagemagid}) 
          this.partiesType.push({
            partiestype: e.partiestype
          })
          this.projectStage.push({
            stagename: e.stagename,
            sa_projstagemagid: e.sa_projstagemagid
          })
        })
      },
      selectFormObject(val) {
        this.partiesType = val

        this.selectObject(val);
      },
      selectFormStage(val) {
        this.projectStage = val

        this.selectStage(val);
      },
      // 选择客户对象
      selectObject (val) {
        // val.length === 0?this.form.onparties = 0:""


        // // 表格插入数据
        // this.optionscore = val.map(e=>{
        //   return {
        //     partiestype:e.partiestype,
        //     stagename:''
        //   }
        // // })
        // (e == 0 && val.length === 0) ? this.form.onparties = 0 : ""
        this.objects = new Map()
        val.forEach(v => this.objects.set(v.partiestype, v))
        console.log('try calculate')
        this.optionscore = this.calculate(this.optionscore)
        this.act_projtask?this.act_projtask.projtaskmag_optionscore = this.optionscore:''

        this.form.projtaskmag_options
          .filter(task => task != this.act_projtask)
          .map(task => { 
            console.log(`88888 re-build optionscore for task ${task.optionname}`)
            return task
          })
          .forEach(task => task.projtaskmag_optionscore = this.calculate(task.projtaskmag_optionscore))
      },
      // 选择项目阶段
      selectStage (val) {

        // (e == 0 && val.length === 0) ? this.form.onparties = 0 : ""
        this.stages = new Map()
        val.forEach(v => this.stages.set(v.stagename, v))
        this.optionscore = this.calculate(this.optionscore)
        this.act_projtask?this.act_projtask.projtaskmag_optionscore = this.optionscore:''

        this.form.projtaskmag_options
          .filter(task => task != this.act_projtask)
          .map(task => { 
            console.log(`88888 re-build optionscore for task ${task.optionname}`)
            return task
          })
          .forEach(task => task.projtaskmag_optionscore = this.calculate(task.projtaskmag_optionscore))
        // // 判断是否选中数据,若无数据则自动取消勾选
        // val.length === 0?this.form.onstage = 0:""
        // this.projectStage = val
        // // 判断客户对象是否有数据,若有数据指循环插入阶段数据
        // if (this.partiesType.length > 0) {
        //   let arr = []
        //   val.forEach(ele => {
        //     this.optionscore.forEach(opt => {
        //       arr.push({
        //         "sa_projtaskmag_optionscoreid":0,
        //         "partiestype": opt.partiestype,
        //         "stagename":ele.stagename,
        //         "sa_projstagemagid": ele.sa_projstagemagid,
        //         "score": 0
        //       })
        //     });
        //   })
        //   this.optionscore = this.tool.sortArr(arr,'partiestype')
        // } else {
        //   this.optionscore = val.map(e=>{
        //     return {
        //       partiestype:e.partiestype,
        //       stagename:e.stagename,
        //       sa_projstagemagid: ele.sa_projstagemagid,
        //     }
        //   })
        // }

        
      },
      calculate(optionscore) {
        var list = [];
        if (this.stages == null || this.stages.size == 0){
          this.objects.forEach((item, key) => {
            list.push({
              sa_projtaskmag_optionscoreid: 0,
              partiestype: item.partiestype,
              stagename : '',
              score: optionscore ? this.getScore(optionscore, item.partiestype, '') : 0
            })
          })
        } else if (this.objects == null || this.objects.size == 0) {
          this.stages.forEach((item, key) => {
            list.push({
              sa_projtaskmag_optionscoreid: 0,
              partiestype: '',
              stagename: item.stagename,
              sa_projstagemagid: item.sa_projstagemagid,
              score: optionscore ? this.getScore(optionscore, '', item.stagename) : 0
            })
          })
        } else {
          this.objects.forEach((objItem, objKey) => {
            this.stages.forEach((stageItem, stageKey) => {
              list.push({
                sa_projtaskmag_optionscoreid: 0,
                partiestype: objItem.partiestype,
                stagename: stageItem.stagename,
                sa_projstagemagid: stageItem.sa_projstagemagid,
                score: optionscore ? this.getScore(optionscore, objItem.partiestype, stageItem.stagename) : 0
              })
            })
          })
        }
        return list;
      },
      getScore(optionscore, partiestype, stagename) {
        let result = optionscore.filter(item => item.partiestype == partiestype && item.stagename == stagename)
        return result.length > 0 ? result[0].score : 0
      },
      // 勾选对象状态
      onPartiesChange(val) {
        this.selectObject(val ? this.partiesType : [])

        // 取消勾选
        // if (!val) {
        //   // 更新节点所有数据
        //   console.log(this.projectStage)
        //   this.optionscore = this.projectStage.map(e=>{
        //     return {
        //       partiestype:'',
        //       stagename:e.stagename,
        //       sa_projstagemagid: e.sa_projstagemagid,
        //     }
        //   })
        // }
      },
      // 勾选阶段状态
      onOnstageChange(val) {
        this.selectStage(val ? this.projectStage : [])
        // 取消勾选
        // if (!val) {
        //   // 若有客户对象数据则改变结构
        //   this.optionscore = this.partiesType.map(e=>{
        //     return {
        //       partiestype:e.partiestype,
        //       stagename:'',
        //     }
        //   })
        // }
      },

      // 新建任务
      addOptions(){
        let row = {
          "sa_projtaskmag_optionsid": 0,
          "optionname": "",
          "remarks": "",
          "score": 0,
          "projtaskmag_optionscore": this.calculate(null)
        }
        this.form.projtaskmag_options.push(row)
        if (!this.act_projtask) {
          this.rowClick(row)
        }
      },
      // 删除任务
      deleteOptions(index) {
        console.log(index)
        this.form.projtaskmag_options = this.form.projtaskmag_options.filter((e,idx)=>{
          if (idx !== index) {
            return e
          }
        })
      },
      // 点击任务行
      rowClick (row) {
        // 记录当前选中行的行
        this.act_projtask = row

        this.optionscore = row.projtaskmag_optionscore
      },
      async onSubmit () {
        const res = await this.$api.requested({
          "id": "20221128144204",
          "content":this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.drawer = false
        })
      },
    }
  }
</script>