wms1.0/wcs/nladmin-ui/src/views/acs/instruction/index.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.code"
          size="small"
          clearable
          placeholder="输入任务号或指令号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.vehicle_code"
          size="small"
          clearable
          placeholder="输入载具号"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.status"
          clearable
          filterable
          size="small"
          placeholder="任务状态"
          class="filter-item"
          style="width: 190px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.task_status" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <el-input
          v-model="query.point_code"
          size="small"
          clearable
          placeholder="输入起点或终点"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.instruction_type"
          clearable
          filterable
          size="small"
          placeholder="指令类型"
          class="filter-item"
          style="width: 190px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.task_type" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <rrOperation />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-refresh"
          @click="reload"
        >
          同步
        </el-button>
      </crudOperation>
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="起点">
            <el-input v-model="form.start_point_code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="终点">
            <el-input v-model="form.next_point_code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="载具号">
            <el-input v-model="form.vehicle_code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="描述信息" prop="description">
            <el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="false" prop="instruction_id" label="指令标识" />
        <el-table-column prop="task_code" label="任务号" show-overflow-tooltip width="100" />
        <el-table-column prop="instruction_code" label="指令编号" show-overflow-tooltip width="100" />
        <el-table-column prop="instruction_type" label="指令类型" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            {{ dict.label.task_type[scope.row.instruction_type] }}
          </template>
        </el-table-column>
        <el-table-column prop="instruction_status" label="指令状态" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            {{ dict.label.task_status[scope.row.instruction_status] }}
          </template>
        </el-table-column>
        <el-table-column prop="link_num" label="关联编号" show-overflow-tooltip width="100" />
        <el-table-column prop="priority" label="优先级" show-overflow-tooltip width="100" />
        <el-table-column prop="send_status" label="下发状态" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            {{ dict.label.send_status[scope.row.send_status] }}
          </template>
        </el-table-column>
        <el-table-column prop="start_point_code" label="取货点" show-overflow-tooltip width="100" />
        <el-table-column prop="next_point_code" label="放货点" show-overflow-tooltip width="100" />
        <el-table-column prop="put_point_code" label="中转点" show-overflow-tooltip width="100" />
        <el-table-column prop="execute_status" label="执行状态" show-overflow-tooltip width="100">
          <template slot-scope="scope">
            {{ dict.label.execute_status[scope.row.execute_status] }}
          </template>
        </el-table-column>
        <el-table-column prop="execute_device_code" label="当前执行设备" show-overflow-tooltip width="130" />
        <el-table-column prop="vehicle_code" label="载具号" show-overflow-tooltip width="100" />
        <el-table-column prop="quantity" label="物料数量" show-overflow-tooltip width="100" />
        <el-table-column prop="weight" label="物料重量" show-overflow-tooltip width="100" />
        <el-table-column prop="carno" label="车号" show-overflow-tooltip width="100" />
        <el-table-column prop="agv_jobno" label="AGV任务号" show-overflow-tooltip width="120" />
        <el-table-column prop="agv_system_type" label="AGV系统类型" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{ dict.label.agv_system_type[scope.row.agv_system_type] }}
          </template>
        </el-table-column>
        <el-table-column prop="agv_inst_type" label="AGV任务类型" show-overflow-tooltip width="130">
          <template slot-scope="scope">
            {{ dict.label.agv_inst_type[scope.row.agv_inst_type] }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" show-overflow-tooltip width="100" />
        <el-table-column prop="create_by" label="创建者" show-overflow-tooltip width="100" />
        <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip width="150" />
        <el-table-column
          v-permission="['admin','instruction:edit','instruction:del']"
          fixed="left"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-menu" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">完成</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">取消</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">强制取消</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'d')">初始化</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudInstruction, { forceCancelByLinkNum } from '@/api/acs/instruction/instruction'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import { getDicts } from '@/api/system/dict'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'

const defaultForm = {
  instruction_id: null,
  task_id: null,
  instruction_code: null,
  execute_device_code: null,
  execute_status: null,
  execute_status_description: null,
  follow_device_code: null,
  instruction_type: null,
  instruction_status: null,
  send_status: null,
  create_type: null,
  finish_type: null,
  priority: null,
  execute_code: null,
  execute_message: null,
  start_point_code: null,
  start_device_code: null,
  next_point_code: null,
  next_device_code: null,
  from_x: null,
  from_y: null,
  from_z: null,
  to_x: null,
  to_y: null,
  to_z: null,
  last_instruction_id: null,
  can_modify: null,
  remark: null,
  is_active: null,
  is_delete: null,
  create_by: null,
  create_time: null,
  update_by: null,
  update_time: null
}
export default {
  dicts: ['task_status', 'task_type', 'send_status', 'execute_status', 'agv_system_type', 'agv_inst_type'],
  name: 'Instruction',
  components: { crudOperation, pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '指令',
      url: 'api/instruction',
      idField: 'instruction_id',
      sort: 'instruction_id,desc',
      crudMethod: { ...crudInstruction },
      optShow: {
        add: false,
        edit: true,
        del: true
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'instruction:add'],
        edit: ['admin', 'instruction:edit'],
        del: ['admin', 'instruction:del']
      },
      rules: {
        instruction_id: [
          { required: true, message: '指令标识不能为空', trigger: 'blur' }
        ],
        instruction_code: [
          { required: true, message: '指令编码不能为空', trigger: 'blur' }
        ],
        can_modify: [
          { required: true, message: '是否允许修改不能为空', trigger: 'blur' }
        ],
        is_active: [
          { required: true, message: '是否启用不能为空', trigger: 'blur' }
        ],
        is_delete: [
          { required: true, message: '是否删除不能为空', trigger: 'blur' }
        ],
        create_by: [
          { required: true, message: '创建者不能为空', trigger: 'blur' }
        ],
        create_time: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    getDicts().then(data => {
      this.dicts = data
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // https://www.cnblogs.com/jdWu-d/p/11898666.html
    finish(index, row) {
      crudInstruction.finishByLinkNum(row.link_num).then(res => {
        this.crud.toQuery()
        this.crud.notify('完成成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    cancel(index, row) {
      crudInstruction.cancelByLinkNum(row.link_num).then(res => {
        this.crud.toQuery()
        this.crud.notify('取消成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    forceCancel(index, row) {
      crudInstruction.forceCancelByLinkNum(row.link_num).then(res => {
        this.crud.toQuery()
        this.crud.notify('强制取消成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    init(index, row) {
      crudInstruction.init(row.instruction_id).then(res => {
        this.crud.toQuery()
        this.crud.notify('初始化成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    reload() {
      crudInstruction.reload().then(res => {
        this.crud.toQuery()
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },

    beforeHandleCommand(index, row, command) {
      return {
        'index': index,
        'row': row,
        'command': command
      }
    },
    handleCommand(command) {
      switch (command.command) {
        case 'a':// 完成
          this.finish(command.index, command.row)
          break
        case 'b':// 取消
          this.cancel(command.index, command.row)
          break
        case 'c':// 强制取消
          this.forceCancel(command.index, command.row)
          break
        case 'd':// 初始化
          this.init(command.index, command.row)
          break
      }
    }

  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>