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;">
            <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.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>
            <!-- <Select filterable clearable style='width:200px;margin-right: 10px;' v-model="select.mission_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>
          </div>
        </slot>
      </lx-header>
    </div>
      <!-- @cell-click="cellClicks" -->
    <xy-table
      :list="list"
      :total="total"
      stripe
      @pageSizeChange="e => {select.page_size = e,getList()}"
      @pageIndexChange="e => {select.page = e,getList()}"
      :table-item="table">
        <template v-slot:btns>
          <el-table-column fixed="right" align='left' label="操作" width="180" header-align="center">
            <template slot-scope="scope">
              <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="showPlan(scope.row.id)">查看</Button>

              <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="editorPlan(scope.row.id,'editor')">编辑</Button>
           <!-- <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteList(scope.row.id)">
             <Button type="primary" style="margin-right:5px;margin-bottom:5px;" size="small" ghost>删除</Button>
           </Poptip> -->
            </template>
          </el-table-column>
        </template>
      </xy-table>
      <addPlan ref='addPlan' @refresh='getList'></addPlan>
      <showPlan ref='showPlan'></showPlan>
  </div>
</template>

<script>
  import addPlan from '../list/components/addPlan.vue'
  import showPlan from '../list/components/showPlan.vue'

  import {
    listplan,del
  } from '@/api/task/plan.js'

  export default{
    components:{
      addPlan,
      showPlan
    },
    data(){
      return{
        textName:'',
        select:{
          keyword:'',
          page:1,
          page_size:10,
          status:'',
          // is_myself_audit:0,
          year:'',
          plan_type:'',
          sort_name:'start_date',
          sort_type:'DESC'
        },
        total:0,
        statusList:[{
          id:0,
          value:'未完成'
        },{
          id:1,
          value:'开展中'
        },{
          id:2,
          value:'已完成'
        }],
        table:[{
          label:"计划名称",
          prop:'name',
          align:'left'
          // width:200
        },{
          label:"类型",
          prop:'type_detail.value',
          width:120,
        },{
          label:"状态",
          prop:'status',
          width:120,
          formatter:(cell,data,value,index)=>{
            for(var item of this.statusList){
              if(item.id==value){
                return item.value
              }
            }
          }
        },{
          label:"开始日期",
          prop:'start_date',
          width:120,
        },{
          label:"结束日期",
          prop:'end_date',
          width:120,
        },{
          label:"制定人",
          prop:'admin.name',
          width:120,
        },{
          label:"制定日期",
          prop:'created_at',
          width:120,
          formatter:(cell,data,value,index)=>{
            return value?value.substring(0,11):''
          }
        }],
        list:[],
      }
    },
    created(){
      if (this.$route.path) {
        let path = this.$route.path.split("_")
        this.select.plan_type = path[1]
        this.textName = path[1]==1?'年度计划':(path[1]==2?'专题计划':'')
      }
      this.getList()
    },
    methods: {
      changeYear(e){
        console.log(e)
        this.select.year = e
      },
      async getList(){
         const res = await listplan({...this.select})
         this.list = res.data
         this.total = res.total
      },
      pageChange(){},

      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
      },
      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>