patrol-wzgl-web/src/views/outbounds/index.vue

<template>
  <div>
    <div class="button-wrap">
      <Button type="primary" @click="editorChuku('','add','领用出库')">领用出库</Button>
      <Button type="primary" @click="editorChuku('','add','处置出库')">处置出库</Button>
      <Button type="primary" @click="editorChuku('','add','调令出库')">调令出库</Button>
    </div>
    <div ref="lxHeader">
      <lx-header icon="md-apps"  :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <el-input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="经办人搜索" />
            <el-select v-model="select.chukuleixing" style="width: 200px;margin-right: 10px;" placeholder="出库类型" clearable>
              <el-option v-for="item in chukuTypeList" :key="item.id" :value="item.id" :label="item.value"></el-option>
            </el-select>
            <el-select v-model="select.zhuangtai" style="width: 200px;margin-right: 10px;" placeholder="状态" clearable>
              <el-option v-for="item in statusList" :key="item.id" :value="item.id"  :label="item.value"></el-option>
            </el-select>
            <el-date-picker type="date" placeholder="发起日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="select.created_at" style="width: 200px;margin-right: 10px;" />
            <el-date-picker type="date" placeholder="出库日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="select.chukushijian" style="width: 200px;margin-right: 10px;" />
            <Button type="primary" @click="getindex">查询</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      v-loading="loading"
      :list="list"
      :total="total"
      :table-item="table"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
    >
      <template v-slot:zhuangtai>
         <el-table-column label="状态" width="120" align="center" header-align="center">
           <template slot-scope="scope">
             <div v-for="item in statusList">
               <el-tag :type="item.type" v-if="scope.row.zhuangtai==item.id">
                 {{ item.value }}
               </el-tag>
             </div>
           </template>
         </el-table-column>
       </template>
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="300" header-align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.jilurenyuan==authName||isCkName=='仓库管理员'||roleName=='系统管理员'">
              <!-- <Button v-if="scope.row.zhuangtai==='已办结'" type="primary" size="small" style="margin-left: 10px;" @click="printChuku(scope.row.id,scope.row.chukuleixing)">出库</Button>
              <Button type="primary" size="small" style="margin-left: 10px;" @click="editorChuku(scope.row.id,'editor',scope.row.chukuleixing)">编辑</Button>
              <Button v-if="scope.row.zhuangtai==='待处理'" type="primary" size="small" style="margin-left: 10px;" @click="toOaFollow(scope.row.id,scope.row.chukuleixing)">请示流程</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteChuku(scope.row)">
                <Button type="error" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip> -->

              <template v-if="scope.row.zhuangtai==3 || scope.row.zhuangtai==1">
                <Button style="margin-right: 10px;" type="primary" size="small"
                 @click="showChukuDetail(scope.row.id)">查看</Button>
              </template>
              <template v-else>
                <Button v-if="scope.row.zhuangtai==0 || scope.row.zhuangtai==4" style="margin-right: 10px;" type="primary" size="small"
                @click="editorChuku(scope.row.id,'editor',scope.row.chukuleixing)">编辑</Button>

                <Button v-if="scope.row.zhuangtai==0 || scope.row.zhuangtai==4" style="margin-right: 10px;" type="primary" size="small"
                 @click="toOaFollow(scope.row,scope.row.chukuleixing)">发起流程</Button>
<!-- v-if="scope.row.zhuangtai==2 &&(isCkName=='仓库管理员'||roleName=='系统管理员')" -->
                <Button  style="margin-right: 10px;" type="primary" size="small"
                @click="printChuku(scope.row.id)">确认出库</Button>

                <Poptip v-if="scope.row.zhuangtai==0" transfer confirm title="确认要删除该出库记录？"
                @on-ok="deleteChuku(scope.row)">
                  <Button type="error" size="small" ghost>删除</Button>
                </Poptip>
              </template>

            </template>
          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addoutbounds ref="addoutbounds" @refresh="getindex" />
    <printoutbounds ref="printoutbounds" @refresh="getindex" />
    <imports ref="imports" :table-name="customForm.tableName" :form-info="form" @refresh="getindex" />
    <showChuku ref="showChuku" @refresh="getindex"></showChuku>
  </div>
</template>

<script>
import {
  index,
  destroy
} from '@/api/system/baseForm.js'

import {
  delOutbounds
} from '@/api/outbounds.js'
import {
  getInfo
} from '@/api/user.js'
import {
  getOutboundsStatus,
  getOatoken
} from '@/api/contract.js'
import addoutbounds from './component/addoutbounds.vue'
import showChuku from './component/showChuku.vue'
import printoutbounds from './component/printoutbounds.vue'
import {
  Message
} from 'element-ui'
import imports from '@/views/component/imports.vue'
import {
  index as fieldIndex
} from '@/api/system/customFormField'
import {
  getparameter
} from '@/api/system/dictionary'
export default {
  components: {
    addoutbounds,
    showChuku,
    imports,
    printoutbounds
  },
  data() {
    return {
      loading: false,
      userName: '',
      authName: '',
      roleName: '',
      isCkName: '',
      select: {
        pageSize: 10,
        pageIndex: 1,
        keyword: '',
        chukuleixing: '',
        zhuangtai:'',
        created_at:'',
        chukushijian:''
      },
      chukuTypeList: [{
        id: '领用出库',
        value: '领用出库'
      }, {
        id: '处置出库',
        value: '处置出库'
      }, {
        id: '调令出库',
        value: '调令出库'
      }],
      statusList:[{
        id:0,
        value:'待处理',
        type:'info'
      },{
        id:1,
        value:'待办结',
        type:'warning'
      },{
        id:2,
        value:'待出库',
        type:''
      },{
        id:3,
        value:'已出库',
        type:'success'
      },{
        id:4,
        value:'退回',
        type:'danger'
      }],
      customForm: {
        customFormId: '',
        tableName: ''
      },
      wuziguanli_oatoken: '',
      form: [],
      total: 0,
      list: [],
      table: [{
        label: '序号',
        type: 'index',
        fixed: 'left',
        width: 80
      }, {
        label: '出库日期',
        width: 180,
        prop: 'chukushijian',
        align: 'center',
        fixed: 'left'
      },
      {
        label: '出库类型',
        width: 180,
        prop: 'chukuleixing',
        align: 'center'
      },
      {
        label: '状态',
        width: 180,
        prop: 'zhuangtai',
        align: 'center'
      },
      // {
      //   label: '借用仓库',
      //   width: 180,
      //   prop: 'jieyongcangku',
      //   align: 'center'
      // },
      {
        label: '借用部门',
        width: 180,
        prop: 'jieyongbumen',
        align: 'center'
      },
      {
        label: '经办人',
        width: 180,
        prop: 'jilurenyuan',
        align: 'center'
      },
      {
        label: '出库详情',
        width: 300,
        prop: 'id_outbounds_items_outbounds_id_relation',
        align: 'left',
        customFn: (row) => {
          if (row.id_outbounds_items_outbounds_id_relation.length > 0) {
            return row.id_outbounds_items_outbounds_id_relation.map(item => {
              return (<p> {item.wuzibianma}-{item.zichanmingcheng}
                   ：{item.guigexinghao ? '(' + item.guigexinghao + ')' : ''}
                {item.jieyongshuliang}{item.jiliangdanwei}
              </p>)
            })
          } else {
            return
          }
        }
      },
      {
        label: '备注',
        prop: 'beizhu',
        align: 'left'
      },
      {
        label: '发起时间',
        prop: 'created_at',
        align: 'center',
        width:180
      }
      ]
    }
  },
  mounted() {
    // if (this.$route.path) {
    //   const path = this.$route.path.split('_')[1]
    //   const tableName = path == 'receive' ? 'lingyongchuku' : (path == 'disposition' ? 'baofeichuzhi' : 'yingjichuku')
    //   getOutboundsStatus({
    //     table: tableName
    //   })
    // }
    if(this.$route.query.oaType==='wuzi'){
      this.editorChuku('','add',this.$route.query.chukuType)
    }
    this.getUserName()
    this.getindex()
    getOatoken().then(res => {
      this.wuziguanli_oatoken = res.oatoken
    })
  },
  methods: {
    showChukuDetail(id){
      this.$refs['showChuku'].id = id
      this.$refs['showChuku'].isShow = true
    },
    async getUserName() {
      getInfo().then(res => {
        console.log('res', res)
        this.userName = res.username
        this.authName = res.name
        for (var k of res.role) {
          if (k.name == '系统管理员') {
            this.roleName = k.name
          }
          if (k.name == '仓库管理员') {
            this.isCkName = '仓库管理员'
          }
        }
      }).catch(error => {})
    },
    async getindex() {
      this.loading = true
      const res = await index({
        page_size: this.select.pageSize,
        page: this.select.pageIndex,
        table_name: 'outbounds',
        filter: [{ 'key': 'jilurenyuan', 'op': 'like', 'value': this.select.keyword },
          { 'key': 'chukuleixing', 'op': 'like', 'value': this.select.chukuleixing ? this.select.chukuleixing : '' },
          { 'key': 'created_at', 'op': 'like', 'value': this.select.created_at ? this.select.created_at : '' },
          { 'key': 'chukushijian', 'op': 'like', 'value': this.select.chukushijian ? this.select.chukushijian : '' },
          {
            'key': 'zhuangtai',
            'op': 'like',
            'value': this.select.zhuangtai ? this.select.zhuangtai : (this.select.zhuangtai===0?0:'')
          }]

      })
      this.list = res.data
      this.total = res.total
      this.loading = false
    },

    pageChange(e) {
      this.select.pageIndex = e
      this.getindex()
    },
    editorChuku(id, type, leixing) {
      if (id) {
        this.$refs['addoutbounds'].id = id
      }
      this.$refs['addoutbounds'].authName = this.authName
      this.$refs['addoutbounds'].isShow = true
      this.$refs['addoutbounds'].type = type
      this.$refs['addoutbounds'].chukuType = leixing
    },
    //  打印
    printChuku(id, leixing) {
      this.$refs['printoutbounds'].id = id
      this.$refs['printoutbounds'].chukuType = leixing
      this.$refs['printoutbounds'].isShow = true
    },
    async toOaFollow(res, type) {
      let typeid = ''
      const typeObj = JSON.parse(process.env.VUE_APP_OA_URL_TYPE)
      console.log("typeObj",typeObj,type)
      for (var k in typeObj) {
        if (k == type) {
          typeid = parseInt(typeObj[k])
        }
      }
      let default_json = {
        outbounds_id:res.id,
        chukuriqi:res.chukushijian,
        jieyongbumen:res.jieyongbumen,
        jingbanren:res.jilurenyuan,
        beizhu:res.beizhu,
        wuzixinxidan:res.zuozhengwenjian.join(',')
        // jieyongcangku:''
      }
      const url =
          `${process.env.VUE_APP_OA_URL}/admin/flow/create/${typeid}?wuziguanli_oatoken=${this.wuziguanli_oatoken}&&outbounds_id=${res.id}&default_json=${JSON.stringify(default_json)}`
      const seeBuy = window.open(url, '_blank')
      if(this.$route.query.oaType==='wuzi'){
        window.history.back()
      }
    },
    deleteChuku(row) {
      // return
      delOutbounds({
        id: row.id,
        // table_name: 'outbounds',
        // destroy_relation: ['id_outbounds_items_outbounds_id_relation']
      }).then(res => {
        Message({
          type: 'success',
          message: '删除成功'
        })
        this.getindex()
      })
    }
  }

}
</script>

<style scoped lang="scss">
  .button-wrap{
    button{
      margin-right:10px;
    }
  }
</style>