item-management-web/src/views/item/plan.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
    </div>
    <y-detail-page-layout-back :edit-status="true" v-loading="vLoading" element-loading-text="处理中。。。" :list-query="listQuery">
      <div style="padding-top: 30px;">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="itemName +'【排期】' " name="first" class="pane">
            <el-form ref="postForm" :model="postForm" class="form-container" style="padding-left: 100px">
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item
                      label="阶段名称："
                      prop="name"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-input type="text" v-model="postForm.name" class="filter-item" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="postInfo-container">
                  <el-row>
                    <el-col>
                      <el-form-item label="上个阶段："
                                    prop="headerId"
                                    label-width="180px"
                                    class="postInfo-container-item">
                        <el-select
                          v-model="postForm.headerId"
                          placeholder=""
                          clearable
                          filterable
                          class="filter-item" :readonly="postForm.id" :disabled="postForm.id"
                        >
                          <el-option v-for="item in stages"
                                     :key="item.footerId"
                                     :label="item.name"
                                     :value="item.footerId"  />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div class="postInfo-container">
                  <el-row>
                    <el-col>
                      <el-form-item
                        label="阶段目标："
                        prop="target"
                        label-width="180px"
                        class="postInfo-container-item"
                      >
                        <el-input type="text" v-model="postForm.target" class="filter-item"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col >
                    <el-form-item
                      label="开始日期："
                      prop="startDate"
                      :rules="{required: true, message: '请选择日志日期', trigger: 'blur'}"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-date-picker
                        v-model="postForm.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        class="filter-item"
                        style="width: 200px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item
                      label="结束日期："
                      prop="endDate"
                      :rules="{required: true, message: '请选择日志日期', trigger: 'blur'}"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-date-picker
                        v-model="postForm.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        class="filter-item"
                        style="width: 200px"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item label="负责人："
                                  prop="endDate"
                                  label-width="180px"
                                  class="postInfo-container-item">
                      <el-select
                        v-model="postForm.dutyerId"
                        placeholder=""
                        clearable
                        filterable
                        class="filter-item"
                      >
                        <el-option
                          v-for="item in users"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item
                      label="阶段权重："
                      prop="weight"
                      :rules="{required: true, message: '请填写阶段权重（0-100）', trigger: 'blur'}"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-input type="text" v-model="postForm.weight" class="filter-item" placeholder="计算参与人员提成">
                        <i slot="suffix" style="font-size:normal;margin-right: 10px;line-height: 30px">%</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item
                      label="逾期提成系数："
                      prop="coefficient"
                      :rules="{required: true, message: '请填写逾期提成系数（0-100）', trigger: 'blur'}"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-input type="text" v-model="postForm.coefficient" class="filter-item" placeholder="计算参与人员提成">
                        <i slot="suffix" style="font-size:normal;margin-right: 10px;line-height: 30px">%</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="postInfo-container">
                <el-form-item
                  label="参与人员："
                  prop="remark"
                  label-width="180px"
                  class="postInfo-container-item"
                >
                  <el-button type="primary" icon="el-icon-edit" class="filter-item" @click="openJoiner" >设置</el-button>
                </el-form-item>
                <el-dialog
                  width="600px"
                  :title=" '['+title+']参与人员提成系数设置'"
                  :visible.sync="dialogFormVisible"
                  :close-on-click-modal="true"
                  custom-class="customClass"
                >
                  <el-alert
                    title="打勾并设置提成系数有效，否则无效。"
                    type="info"
                    show-icon
                    :closable="false">
                  </el-alert>
                  <y-page-list-layout :get-page-list="getJoinUsers" >
                    <el-table
                      slot="table"
                      row-key="id"
                      :data="joinUsers"
                      ref="multipleTable"
                      :header-row-style="{color: '#333333'}"
                      @selection-change="handleSelectionChange"
                      style="border-left: 1px solid #EBECED;border-right: 1px solid #EBECED;color: #333333;"
                    >
                      <el-table-column
                        type="selection"
                        width="55">
                      </el-table-column>
                      <el-table-column label="人员" width="100" align="center">
                        <template slot-scope="{row}">
                          <span>{{ row.userName }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="提成系数"  align="center">
                        <template slot-scope="{row}">
                          <el-input v-model="row.weight" placeholder="请输入数字">
                            <i slot="suffix" style="font-size:normal;margin-right: 10px;line-height: 30px">%</i>
                          </el-input>
                        </template>
                      </el-table-column>
                    </el-table>
                  </y-page-list-layout>
                </el-dialog>
              </div>
              <div class="postInfo-container">
                <el-row>
                  <el-col>
                    <el-form-item
                      label="备注信息："
                      prop="remark"
                      label-width="180px"
                      class="postInfo-container-item"
                    >
                      <el-input type="textarea" v-model="postForm.remark" class="filter-item" placeholder="200字符"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <el-button type="success" id="addNode" @click="saveNode">保存</el-button>
              <el-button type="normal"  @click="clean">清空</el-button>
            </el-form>
            <div class="nodeFlow">
              <div style="height: 300px;">
                <el-timeline v-if="stageFlow.length>0">
                  <el-timeline-item v-for="(s,index) in stageFlow" :key="index" :timestamp="s.name" placement="top"  color="green"
                                    @click.native="getDetail(s.id)">
                    <el-card class="card">
                      <div class="it">
                        <icon class="el-icon-s-flag"/> <el-tag type="success">{{s.target}}</el-tag>
                      </div>
                      <div class="it">
                        <icon class="el-icon-time"/> <el-tag>{{s.startDate}}</el-tag> 至 <el-tag>{{s.endDate}}</el-tag>
                      </div>
                      <div v-if="s.weight" class="it">
                        <icon class="el-icon-coin"/> <el-tag type="danger">{{s.weight}}%</el-tag>
                      </div>
                      <div v-if="s.dutyer" class="it">
                        <icon class="el-icon-user-solid"/> <el-tag>{{s.dutyer}}</el-tag>
                      </div>
                      <div v-if="s.participated" >
                        <span  v-for="(p,index) in s.participated" :key="index" class="it">
                          <icon class="el-icon-user"/> <el-tag>{{p.userName}} : {{p.weight}}%</el-tag>
                        </span>
                      </div>
                      <el-button class="del" type="danger" icon="el-icon-delete" @click="remove(s.id)"/>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </y-detail-page-layout-back>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import YDetailPageLayoutBack from '@/components/YDetailPageLayout/back'
  export default {
    name: 'itemDetail',
    components: {
      Breadcrumb,
      YDetailPageLayoutBack
    },
    data() {
      return {
        type: 'detail',
        postForm: {
          itemId: this.$route.query.id,
          id:null,
          participators:[],
          name:null
        },
        itemId: this.$route.query.id,
        itemName: this.$route.query.itemName,
        id:null,
        activeName: 'first',
        vLoading: false,
        listQuery:null,
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
        stageFlow:[],
        stages:[],
        users: [],
        joinUsers: [],
        dialogFormVisible:false,
        selectedJoiners : [],
        title:null
      }
    },
    created() {
      this.listQuery = this.$route.query.listQuery;
      this.getFlow();
      this.getSimpleAll();
      this.$api.user.simpleAll().then(res => {
        this.users = res.data;
      });
      this.getJoinUsers();
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            if (row.id!=null && row.weight!=null){
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
        }
      },
      handleSelectionChange(val){
        this.postForm.participators = val;
      },
      openJoiner(){
        this.dialogFormVisible = true;
        this.title = " ";
        if (this.postForm.name!=null && this.postForm.name!=undefined){
          this.title = this.postForm.name;
        }
        setTimeout(() => {
          this.toggleSelection(this.joinUsers);
        }, 200)
      },
      getJoinUsers(){
        const that = this;
        that.$api.item.itemUser({itemId:this.itemId, stageId:this.id}).then(data => {
          if (data.code === 200) {
            this.joinUsers = data.data;
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      },
      getSimpleAll(){
        this.$api.itemStage.simpleAll(this.itemId).then(res => {
          this.stages = res.data;
        });
      },
      getFlow(){
        this.$api.itemStage.flow(this.itemId).then(res => {
          this.stageFlow = res.data===null?[]:res.data;
        });
      },
      getDetail(id) {
        if (id) {
          this.$api.itemStage.detail(id).then(res => {
            this.postForm = res.data;
            this.id = this.postForm.id;
            this.getJoinUsers();
          });
        }
      },
      remove(id){
        const that = this;
        that.$confirm('确认删除当前记录吗?', '警告', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            this.$api.itemStage.delete(id).then(res => {
              if (res.code === 200) {
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                });
                this.getSimpleAll();
                this.getFlow();
              }
            })
          })
          .catch(err => { console.error(err) })
      },
      saveNode(){
        if (this.postForm.startDate>this.postForm.endDate){
          this.$notify({
            title: '错误',
            message: '开始日期不能大于结束日期',
            type: 'error',
            duration: 2000
          });
          return;
        }
        if (this.postForm.remark && this.postForm.remark.length>200){
          this.$notify({
            title: '错误',
            message: '备注信息不超过200字符',
            type: 'error',
            duration: 2000
          });
          return;
        }
        this.vLoading = true;
        this.$refs.postForm.validate(valid => {
          if (valid) {
            if (this.itemId && this.id===null) {
              this.$api.itemStage.add(Object.assign({}, this.postForm, {
              })).then(res => {
                if (res.code === 200) {
                  this.$notify({
                    title: '成功',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.getSimpleAll();
                  this.getFlow();
                  this.vLoading = false
                }
              }).catch(() => {
                this.vLoading = false
              })
            } 
            else {
              this.$api.itemStage.edit(Object.assign({}, this.postForm, {
              })).then(res => {
                if (res.code === 200) {
                  this.$notify({
                    title: '成功',
                    message: '保存成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.getSimpleAll();
                  this.getFlow();
                  this.vLoading = false
                }
              }).catch(() => {
                this.vLoading = false
              })
            }
            //清空表单
            this.clean();

          }
        })
      },
      clean(){
        this.postForm = {id:null};
        this.postForm.itemId = this.itemId;
        this.id = null;
        this.getJoinUsers();
      },
      },
  }
</script>
<style lang="css" scoped>
    .pane{
      display: flex;
    }
    .pane>div{
      flex: 1;
    }
    .form-container{
      padding-top: 30px;
      width: 700px;
      height: 800px;
      border: 1px solid darkgray;
      box-shadow: 10px 10px 5px #888888;;
      border-radius: 10px;
    }
    .form-container:hover{

    }
    .filter-item{
      width: 200px;
    }
    .nodeFlow{
      width: 300px;
      /*height: 800px;*/
      margin-left: 100px;
      overflow: auto;
    }
    #addNode{
      margin-left: 180px;
    }

    div.it{
      margin-top: 5px;
    }
    .card{
      cursor: pointer;
      display: flex;
      width: 500px;
    }
    .del{
      position: absolute;
      top:60px;
      left: 480px;
    }
</style>
<style lang="scss" scoped>
  /deep/.customClass{
    border-radius: 20px;
  }
</style>