yos_web/src/Form/projectTask/add.vue

<template>
  <div>
    <el-button size="small" type="primary" @click="(drawer = true)">新 建</el-button>
    <el-drawer
      title="新建项目工作任务"
      :visible.sync="drawer"
      direction="rtl"
      append-to-body
      :show-close="false"
      size="80%">
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" ref="form" :rules="rules" class="demo-form-inline" size="small" label-position="rigth" label-width="90px">
            <el-col :span="20">
              <el-form-item  style="width:100%" label="工作任务" prop="taskname">
                <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 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 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>
          <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="onClose" 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: [],
        rules:{
          taskname: [
            { required: true, message: '任务名称不能为空', trigger: 'blur' },
          ],
        },
      }

      
    },
    methods:{
      selectFormObject(val) {
        this.partiesType = val

        this.selectObject(val);
      },
      selectFormStage(val) {
        this.projectStage = val
        this.selectStage(val);
      },
      // 选择客户对象
      selectObject (val) {

        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))

        
      },
      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) {
        val?this.$refs['onparties'].drawer = true:''

        this.selectObject(val ? this.partiesType : [])
      },
      // 勾选阶段状态
      onOnstageChange(val) {
        val?this.$refs['onstage'].drawer = true:''
        this.selectStage(val ? this.projectStage : [])
      },

      // 新建任务
      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
      },
      onSubmit () {
        this.$refs.form.validate(async (valid)=>{
          if (!valid) return false
          const res = await this.$api.requested({
            "id": "20221128144204",
            "content":this.form
          })
          this.tool.showMessage(res,()=>{
            this.$emit('onSuccess')
            this.form = {
              "sa_projtaskmagid": 0,
              "taskname": "",
              "sequence": 0,
              "important": 0,
              "onparties": 0,
              "onstage": 0,
              "projtaskmag_options": []
            }
            this.optionscore=[]
            this.partiesType=[]
            this.projectStage=[]
            this.drawer = false
            this.$refs.onparties.$refs.projectType.$refs.tables.clearSelection()
            this.$refs.onstage.$refs.projectType.$refs.tables.clearSelection()
          })
        })
      },
      onClose(){
        this.drawer = false
        this.form = {
          "sa_projtaskmagid": 0,
          "taskname": "",
          "sequence": 0,
          "important": 0,
          "onparties": 0,
          "onstage": 0,
          "projtaskmag_options": []
        }
        this.optionscore=[]
        this.partiesType=[]
        this.projectStage=[]
        this.$refs.onparties.$refs.projectType.$refs.tables.clearSelection()
        this.$refs.onstage.$refs.projectType.$refs.tables.clearSelection()
      }
    }
  }
</script>