szhd-safety-web-new/src/views/task/list/plan.vue

<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" :text="textName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Select filterable clearable style='width:200px;margin-right: 10px;' v-model="select.status"
              placeholder="计划状态">
              <Option v-for="item in statusList" :value="item.id">{{item.value}}</Option>
            </Select>
            <DatePicker style='width:200px;margin-right: 10px;' placeholder="年份" placement="bottom" format='yyyy'
              type="year" @on-change="changeYear"></DatePicker>
            <Input v-model="select.keyword" clearable style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />

            <!-- <Select filterable clearable style='width:200px;margin-right: 10px;' v-model="select.plan_id" placeholder="专项任务">
              <Option v-for="item in missionList" :value="item.id">{{item.name}}</Option>
            </Select> -->

            <Button type="primary" @click="getList">查询</Button>
            <Button type="primary" style="margin-left: 10px;" @click="editorPlan('','add')">添加</Button>
            <Button type="primary" style='margin-left: 10px;'
              @click="chooseEditorPlan()">编辑</Button>
          </div>
        </slot>
      </lx-header>
    </div>
    <!-- @cell-click="cellClicks" -->
    <xy-table :list="list"
    :total="total"
    stripe
    @cell-dblclick="cellClicks"
    @selection-change='selectionChange'
    @pageSizeChange="e => {select.page_size = e,getList()}"
    @pageIndexChange="e => {select.page = e,getList()}"
    :table-item="table">
      <template v-slot:btns>
        <el-table-column align='center' label="操作" width="100" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small"
                @click="showPlan(scope.row.id)">查看/添加</Button>
            </div>
            <!-- <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small"
              @click="editorUnit('add',scope.row.id)">发起任务</Button> -->
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <addPlan ref='addPlan' @refresh='getList'></addPlan>
    <showPlan ref='showPlan'></showPlan>
    <addUnit ref='addUnit' @refresh='getList'></addUnit>
  </div>
</template>

<script>
  import addPlan from '../list/components/addPlan.vue'
  import addUnit from '../list/components/addUnit.vue'
  import showPlan from '../list/components/showPlan.vue'
  import {
    listplan,
    del
  } from '@/api/task/plan.js'
  import state from '@/store/modules/user.js'
  export default {
    components: {
      addPlan,
      showPlan,
      addUnit
    },
    data() {
      return {
        textName: '',
        stateObj:{},
        select: {
          keyword: '',
          page: 1,
          page_size: 10,
          status: '',
          // is_myself_audit:0,
          year: new Date().getFullYear(),
          plan_type: '',
          sort_name: 'start_date',
          sort_type: 'DESC'
        },
        sectionList:[],
        total: 0,
        statusList: [{
          id:0,
          value:'未完成',
          type:'danger'
        },{
          id:1,
          value:'未开展',
          type:'info'
        },{
          id:2,
          value:'开展中',
          type:''
        },{
          id:3,
          value:'已完成',
          type:'success'
        }],
        table: [{
          type:'selection',
          selectable:(row,index)=>{
            if(this.stateObj.login_id==row.admin_id||this.stateObj.is_guiji||this.stateObj.is_chuzhang){
              return true
            }else{
              return false
            }
          }
        }, {
          label: "开始日期",
          prop: 'start_date',
          width: 120,
        },{
          label: "计划名称",
          prop: 'name',
          align: 'left'
          // width:200
        }, {
          label: "类型",
          prop: 'type_detail.value',
          width: 120,
        }, {
          label: "状态",
          prop: 'status',
          width: 120,
          customFn:(row)=>{
            return(<div>
            {
              this.statusList.map(item=>{
                if(item.id==row.status){
                  return(<el-tag type={item.type}>{item.value}</el-tag>)
                }
              })
            }
            </div>)
          }
        }, {
            label: "参与对象",
            prop: '_names',
            width: 240,
            align: 'left',
            customFn:row=>{
              return(<div  style={{"display": "flex","flex-wrap": "wrap"}}>
              {
                row._names?
                row._names.map(item=>{
                  return(<div>
                    {
                      item.group_name?
                      // 组别
                      <div style={{"display": "flex"}}><div>{item.group_name}：</div>
                        <div  style={{"display": "flex","flex-wrap": "wrap"}}>{
                          item.details.map(detail=>{
                            return(
                              <el-tag style={{'margin':'0 5px 5px 0'}}>{detail.name}</el-tag>
                            )
                          })
                        }</div>
                      </div>
                      :
                      // 其他
                      <el-tag style={{'margin':'0 5px 5px 0'}}>{item.name}</el-tag>
                    }
                  </div>)
                }):''
              }</div>)
            }
          },{
          label: "结束日期",
          prop: 'end_date',
          width: 120,
        }, {
          label: "任务数量",
          prop: 'mission',
          width: 120,
          formatter:(cell,data,value,index)=>{
            return value?(value.length===0?'--':value.length):'--'
          }
        }, {
          label: "审核人",
          prop: 'admin.name',
          width: 120,
        }],
        list: [],
      }
    },
    created() {
      // this.getUserId()
      // this.getLeads()
      this.stateObj = state.state
      console.log("state123",state)
      this.getList()
    },
    methods: {

      async getList() {
        const res = await listplan({
          ...this.select
        })
        //  处理参于人员选择
        for(var r of res.data){
          var _names = []
          // 只有人员
          if(r.accept_admin_ids&&r.accept_admin_ids.length>0){
            r.accept_admin.map(item=>{
              let hasDetail = item.detail?true:false
                _names.push({
                  'name':item.name
                })
            })
            r._names = _names
          }
          // 部门
          if(r.accept_department_ids&&r.accept_department_ids.length>0){
            r.accept_department.map(item=>{
              let hasDetail = item.detail?true:false
                _names.push({
                  'name':item.name,
                  'hasDetail':hasDetail
                })
            })
            r._names = _names
          }
          // 组别
          if(r.groups&&r.groups.length>0){
              for(var g of r.groups){
                for(var de of g.details){
                  if(g.type==1){
                    let is_index = 0
                    for(var a of r.grounp_admin_detail){
                      if(de.name===a.admin?.name){
                        if(a.detail){
                          is_index++
                        }
                      }
                    }
                    de.hasDetail=is_index>0?true:false
                  }
                  if(g.type==2){
                    let is_index = 0
                    for(var dp of r.grounp_department_detail){
                      if(de.name===dp.department.name){
                        if(dp.detail){
                          is_index++
                        }
                      }
                    }
                    de.hasDetail=is_index>0?true:false
                  }
                }
              }
              // 处理过的groups
            r.groups.map((item,index)=>{
              _names.push({
                group_name:item.name,
                details:item.details
              })
            })
            r._names = _names
          }
        }
        this.list = res.data
        this.total = res.total
      },
      changeYear(e) {
        console.log(e)
        this.select.year = e
      },
      selectionChange(e){
        let arr = []
        if(e.length>0){
          for(var k of e){
            arr.push(k.id)
          }
        }else{
          arr = []
        }
        this.sectionList = arr
      },
      chooseEditorPlan(){
        if(this.sectionList.length>0){
          if(this.sectionList.length==1){
            this.editorPlan(this.sectionList[0],'editor')
          }else{
            this.$Message.warning('每次只能编辑一条年度计划任务');
          }
        }else{
          this.$Message.warning('请选择需要编辑的年度计划任务');
        }
      },
      editorPlan(id, type) {
        if (type == 'add') {
          this.$refs.addPlan.plan_type = this.select.plan_type
        }
        this.$refs.addPlan.id = id
        this.$refs.addPlan.type = type
        this.$refs.addPlan.isShow = true
      },
      cellClicks(e){
        this.$refs.showPlan.id = e.row.id
        this.$refs.showPlan.isShow = true
      },
      showPlan(id) {
        this.$refs.showPlan.id = id
        this.$refs.showPlan.isShow = true
      },
      deleteList(id) {
        var that = this;
        if (id) {
          del(id).then(response => {
            this.$Message.success('操作成功');
            that.getList();
          }).catch(error => {
            console.log(error)
            reject(error)
          })
        }
      }
    },
    watch: {}
  }
</script>

<style scoped>
  /deep/ .el-icon-circle-close {
    color: #fff
  }

  /*  /deep/ .el-table__body tr.el-table__row--striped td {
    background-color: #C0C4CC!important;
  } */
</style>