X-web/src/views/modules/works/work.vue

<!-- 我的工作台 -->
<template>
  <div class="works">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
      <el-form-item label="状态">
        <el-select
          v-model="dataForm.state"
          remote
          placeholder="请选择">
          <el-option
            v-for="item in optionsState"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="queryData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="taskName"
        header-align="center"
        align="center"
        min-width="140"
        :show-tooltip-when-overflow="true"
        label="任务名称">
      </el-table-column>
      <el-table-column
        v-if="showProgress"
        prop="completeNum"
        header-align="center"
        align="center"
        min-width="160"
        label="任务进度">
        <template slot-scope="scope">
          <el-progress :percentage="getPercentage(scope.row.completeNum, scope.row.totalNum)"></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="endTime"
        header-align="center"
        align="center"
        min-width="160"
        label="规定完成时间">
      </el-table-column>
      <el-table-column
        prop="nodeName"
        header-align="center"
        align="center"
        min-width="160"
        :show-tooltip-when-overflow="true"
        label="工序内容">
      </el-table-column>
      <el-table-column
        prop="require"
        header-align="center"
        align="center"
        min-width="160"
        :show-tooltip-when-overflow="true"
        label="工序要求">
      </el-table-column>
      <el-table-column
        prop="explain"
        header-align="center"
        align="center"
        min-width="160"
        :show-tooltip-when-overflow="true"
        label="工序说明">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        min-width="160"
        :show-tooltip-when-overflow="true"
        label="工序附件">
        <template slot-scope="scope">
          <li v-for="(item, index) in scope.row.attachList" :key="index"><a @click="previewFile(item.url)">{{item.fileName}}</a></li>
        </template>
      </el-table-column>
      <el-table-column
        v-if="dataForm.state !== '3'"
        fixed="right"
        header-align="center"
        align="center"
        width="180"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('work:clt:start') && (scope.row.state == 0 || scope.row.state == 1)" :disabled="scope.row.state == 0" type="text" size="small" @click="startTask(scope.row.taskId)">开始</el-button>
          <el-button v-if="isAuth('work:clt:complete') && scope.row.state != 3" type="text" size="small" @click="transferTask(scope.row.taskId, scope.row.workTypeId)">移交</el-button>
          <el-button v-if="isAuth('work:clt:complete') && scope.row.state == 2 && (scope.row.nodeType == null || scope.row.nodeType == 'start' || scope.row.nodeType == 'produce')" type="text" size="small" @click="completeTask(scope.row.taskId)">完成</el-button>
          <el-button v-if="isAuth('work:clt:complete') && scope.row.state == 2 && (scope.row.nodeType == 'check' || scope.row.nodeType == 't-check')" type="text" size="small" @click="checkTask(scope.row.taskId, 1)">通过</el-button>
          <el-button v-if="isAuth('work:clt:complete') && scope.row.state == 2 && (scope.row.nodeType == 'check' || scope.row.nodeType == 't-check')" type="text" size="small" @click="checkTask(scope.row.taskId, 2)">不通过</el-button>
          <el-button v-if="isAuth('work:clt:complete') && scope.row.state == 2 && (scope.row.nodeType == null || scope.row.nodeType == 'produce')" type="text" size="small" @click="damageTask(scope.row.nodeId, scope.row.productionId)">操作损坏</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog title="移交任务" width="30%" :visible.sync="transferDialogFormVisible">
      <el-form :model="transferDialogForm" :rules="transferDialogFormRules" ref="transferDialogForm">
        <!-- <el-form-item label="检验类型" prop="checkType" label-width="120px">
           <el-select v-model="transferDialogForm.checkType" placeholder="请选择检验类型">
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="移交类型" prop="transferType" label-width="120px">
           <el-select v-model="transferDialogForm.transferType" placeholder="请选择移交类型">
            <el-option label="工作移交" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="移交用户" prop="transferUserId" label-width="120px">
          <el-select v-model="transferDialogForm.transferUserId" placeholder="请选择移交用户">
           <el-option
            v-for="item in transferUserList"
            :key="item.userId"
            :label="item.name"
            :value="item.userId">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="移交说明" prop="transferExplain" label-width="120px">
          <el-input v-model="transferDialogForm.transferExplain" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transferDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="transferSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="检验任务" width="30%" :visible.sync="checkDialogFormVisible">
      <el-form :model="checkDialogForm" :rules="checkDialogFormRules" ref="checkDialogForm">
        <el-form-item label="检验类型" prop="checkType" label-width="80px">
           <el-select v-model="checkDialogForm.checkType" placeholder="请选择检验类型" style="width:100%">
            <el-option label="返回上一级" value="2"></el-option>
            <el-option label="报损" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="notes" label-width="80px">
          <el-input v-model="checkDialogForm.notes" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作损坏" width="30%" :visible.sync="damageDialogFormVisible">
      <el-form :model="damageDialogForm" :rules="damageDialogFormRules" ref="damageDialogForm">
        <el-form-item label="损坏原因" prop="damageReason" label-width="80px">
          <el-input v-model="damageDialogForm.damageReason" type="textarea" :rows="2" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="damageDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="damageSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskList, startTask, transferTask, completeTask, checkTask, damageTask } from '@/api/task'
import { workTypeMasterList } from '@/api/worktype'
import templateList from '../warehouse/template-list'
import { downloadUrl } from '@/api/file'
export default {
  components: { templateList },
  name: 'work',
  data () {
    return {
      addOrUpdateVisible: false,
      dataForm: {
        state: '1'
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      optionsState: [
        {
          code: '1', value: '未完成'
        },
        {
          code: '2', value: '待操作'
        },
        {
          code: '3', value: '已完成'
        }
      ],
      transferDialogFormVisible: false,
      transferDialogForm: {},
      transferUserList: [],
      transferDialogFormRules: {
        transferType: [{required: true, message: '请选择移交类型', trigger: 'blur'}],
        transferUserId: [{required: true, message: '请选择移交用户', trigger: 'blur'}]
      },
      checkDialogFormVisible: false,
      checkDialogForm: {
        checkType: '',
        notes: ''
      },
      checkDialogFormRules: {
        checkType: [{required: true, message: '请选择', trigger: 'blur'}]
      },
      damageDialogFormVisible: false,
      damageDialogForm: {},
      damageDialogFormRules: {
        damageReason: [{required: true, message: '请输入', trigger: 'blur'}]
      },
        // 是否显示进度条列
      showProgress: true
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
      // 查询
    queryData () {
      this.pageIndex = 1
      this.showProgress = this.dataForm.state !== '2'
      this.getDataList()
    },
      // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      let params = {
        'current': this.pageIndex,
        'size': this.pageSize,
        'state': this.dataForm.state
      }
      getTaskList(params).then(({data}) => {
        if (data && data.code === '200') {
          this.dataList = data.data.records
          this.totalPage = Number(data.data.total)
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
      // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
      // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
      // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
      // 开始
    startTask (taskId) {
      this.$confirm('是否开始任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        startTask({taskId}).then(({data}) => {
          if (data && data.code === '200') {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
      // 移交
    transferTask (taskId, workTypeId) {
      this.transferDialogFormVisible = true
      this.transferDialogForm.taskId = taskId

      workTypeMasterList(workTypeId).then(({data}) => {
        if (data && data.code === '200') {
          this.transferUserList = data.data
        }
      })
    },
      // 确认移交
    transferSubmit () {
      this.$refs['transferDialogForm'].validate((valid) => {
        if (valid) {
          transferTask(this.transferDialogForm).then(({data}) => {
            if (data && data.code === '200') {
              this.$message({
                type: 'success',
                message: '移交成功!'
              })
              this.transferDialogFormVisible = false
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              })
            }
          })
        }
      })
    },
      // 完成
    completeTask (taskId) {
      this.$confirm('是否完成任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        completeTask({taskId}).then(({data}) => {
          if (data && data.code === '200') {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
      // 检验
    checkTask (taskId, checkType) {
      this.checkDialogForm.taskId = taskId
      if (checkType === 1) {
        this.checkDialogForm.checkType = checkType
        this.passTask()
      } else {
        this.checkDialogForm.checkType = null
        this.refuseTask()
      }
    },
      // 通过
    passTask () {
      this.$confirm('是否完成任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let submitData = this.checkDialogForm
        checkTask(submitData).then(({data}) => {
          if (data && data.code === '200') {
            this.$message({
              type: 'success',
              message: '移交成功!'
            })
            this.checkDialogFormVisible = false
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    refuseTask () {
      this.checkDialogFormVisible = true
    },
      // 不通过
      // 确认检验
    checkSubmit () {
      this.$refs['checkDialogForm'].validate((valid) => {
        if (valid) {
          let submitData = this.checkDialogForm
          checkTask(submitData).then(({data}) => {
            if (data && data.code === '200') {
              this.$message({
                type: 'success',
                message: '检验成功!'
              })
              this.checkDialogFormVisible = false
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              })
            }
          })
        }
      })
    },
      // 操作损坏
    damageTask (nodeId, productionId) {
      this.damageDialogFormVisible = true
      this.damageDialogForm.nodeId = nodeId
      this.damageDialogForm.productionId = productionId
    },
      // 确认操作损坏
    damageSubmit () {
      this.$refs['damageDialogForm'].validate((valid) => {
        if (valid) {
          let submitData = this.damageDialogForm
          damageTask(submitData).then(({data}) => {
            if (data && data.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.damageDialogFormVisible = false
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              })
            }
          })
        }
      })
    },
      // 预览
    previewFile (url) {
        // 弹出新页面显示下载文件
      window.open(downloadUrl + url, '_blank')
    },
      // 计算进度百分比，返回0到100的整数
    getPercentage (completeNum, totalNum) {
      completeNum = completeNum == null ? 0 : parseInt(completeNum)
      totalNum = totalNum == null ? 100 : parseInt(totalNum)
      if (totalNum === 0) {
        return 100
      }

      return (completeNum / totalNum).toFixed(2) * 100
    }
  }
}
</script>

<style scoped>
li {list-style-type:none;}
</style>