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>
    <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"
                      >
                        <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-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>
            <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=" '['+postForm.name +']参与人员提成系数设置'"
                :visible.sync="dialogFormVisible"
                :close-on-click-modal="true"
              >
                <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>
            <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.dutyer" class="it">
                      <icon class="el-icon-user"/> <el-tag>{{s.dutyer}}</el-tag>
                    </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>
  </div>
</template>
<script>
  import Breadcrumb from '@/components/Breadcrumb'
  export default {
    name: 'itemDetail',
    components: {
      Breadcrumb,
    },
    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:{},
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
        stageFlow:[],
        stages:[],
        users: [],
        joinUsers: [],
        dialogFormVisible:false,
      }
    },
    created() {
      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){
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
        }
      },
      handleSelectionChange(val){
        this.postForm.participators = val;
      },
      openJoiner(){
        this.dialogFormVisible = true;
        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
              })
            }
          }
        })
      },
      clean(){
        this.postForm = {id:null};
        this.postForm.itemId = this.itemId;
        this.id = null;
      },
      },
  }
</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>