jsh_erp/jshERP-web/src/views/stock/CheckList.vue

<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :bordered="false" :style="cardStyle">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="盘点状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择盘点状态" showSearch :options="taskStatusList" v-model="queryParam.taskStatus">
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="盘点单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入任务编号、名称" v-model="queryParam.number"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="盘点仓库" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select placeholder="请选择盘点仓库" showSearch :options="deoptData" v-model="queryParam.depotId">
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                  </a>
                </span>
              </a-col>
              <template v-if="toggleSearchStatus">
                <a-col :md="6" :sm="24">
                  <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select placeholder="请选择创建人" showSearch :options="spinnerList" v-model="queryParam.createBy">
                    </a-select>
                  </a-form-item>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </div>
        <div class="table-operator" style="margin-top: 5px">
          <a-button :disabled="!selectedRowKeys.length" type="primary" @click="onStartTask">开始盘点</a-button>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :scroll="scroll"
          :loading="loading"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            getCheckboxProps: getCheckboxProps,
          }"
          @change="handleTableChange"
        >
          <template slot="taskType" slot-scope="value">
            {{ value === 1 ? '全盘' : '抽盘' }}
          </template>
          <template slot="taskStatus" slot-scope="value">
            {{ formateTaskStatus(value) }}
          </template>
          <span slot="action" slot-scope="text, record">
            <a @click="addTask('detail', record)">查看</a>
            <a-divider type="vertical" />
            <a :disabled="record.taskStatus > 3" @click="addTask('edit', record)">编辑</a>
          </span>
        </a-table>
      </a-card>
    </a-col>
    <check-modal
      :spinnerList="spinnerList"
      :deoptData="deoptData"
      :stockVisible.sync="stockVisible"
      :title="title"
      :rules="rules"
      :taskId="taskId"
      :openType="openType"
      ref="stockF"
    ></check-modal>
  </a-row>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
import CheckModal from './components/checkModal.vue'

export default {
  components: { CheckModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 19,
        offset: 1,
      },
      taskStatusList: [
        { value: 0, label: '未审核' },
        { value: 1, label: '已审核' },
        { value: 2, label: '进行中' },
        { value: 3, label: '已完成' },
        { value: 4, label: '已取消' },
        { value: 5, label: '已更新' },
        { value: 8, label: '审核未通过' },
        { value: 9, label: '审核中' },
      ],
      queryParam: {},
      columns: [
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' },
        },
        {
          title: '盘点任务编号',
          dataIndex: 'number',
          align: 'left',
          width: 170,
        },
        {
          title: '盘点任务名称',
          dataIndex: 'taskName',
          align: 'left',
          width: 140,
        },
        {
          title: '盘点类型',
          dataIndex: 'taskType',
          align: 'left',
          width: 100,
          scopedSlots: { customRender: 'taskType' },
        },
        {
          title: '盘点仓库',
          dataIndex: 'depotName',
          align: 'left',
          width: 100,
        },
        {
          title: '商品数量',
          dataIndex: 'materialCount',
          align: 'left',
          width: 100,
        },
        {
          title: '盘点库位范围',
          dataIndex: 'positionRange',
          align: 'left',
          width: 120,
        },
        {
          title: '创建人',
          dataIndex: 'createByName',
          align: 'left',
          width: 100,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'left',
          width: 100,
        },
        {
          title: '盘点负责人',
          dataIndex: 'creatorName',
          align: 'left',
          width: 100,
        },
        {
          title: '盘点状态',
          dataIndex: 'taskStatus',
          align: 'left',
          width: 100,
          scopedSlots: { customRender: 'taskStatus' },
        },
        {
          title: '完成时间',
          dataIndex: 'operTime',
          align: 'left',
          width: 100,
        },
      ],
      dataSource: [],
      loading: false,
      rules: {
        taskType: { rules: [{ required: true, message: '请选择盘点类型' }] },
        depotId: { rules: [{ required: true, message: '请选择盘点仓库' }] },
        taskName: { rules: [{ required: true, message: '请输入盘点任务名称' }] },
      },
      url: {
        list: '/stocktaking/list',
        add: '/stocktaking/add',
        spinnerList: '/stocktaking/creatorSpinnerList',
        depotList: '/depot/findDepotByCurrentUser',
        delete: '/stocktaking/taskDelete/',
        cancel: '/stocktaking/taskCancel/',
        startTask: '/stocktaking/startTask/',
      },
      stockVisible: false,
      title: '',
      spinnerList: [],
      deoptData: [],
      taskId: '',
      openType: 'add',
    }
  },
  watch: {
    stockVisible(val) {
      if (!val) {
        this.loadData()
      }
    },
  },
  created() {
    this.getSpinnerList()
    this.getDepotList()
  },
  methods: {
    addTask(type, data) {
      this.taskId = ''
      this.openType = type
      this.title = type === 'add' ? '新增' : type === 'edit' ? '编辑' : '查看'
      if (type !== 'add') {
        this.getDetailList(data.id)
      }
      this.stockVisible = true
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.loading = true
      const url = this.url.list + '?currentPage=' + this.ipagination.current + '&pageSize=' + this.ipagination.pageSize
      postAction(url, {
        ...this.queryParam
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.rows
          this.ipagination.total = Number(res.data.total)
        }else {
          this.$message.warning(res.msg)
        }
        this.loading = false
        this.onClearSelected()
      })
    },
    getDetailList(id) {
      this.taskId = id
    },

    getSpinnerList() {
      getAction(this.url.spinnerList).then((res) => {
        this.spinnerList = res.data || []
      })
    },

    getDepotList() {
      getAction(this.url.depotList).then((res) => {
        this.deoptData = res.data.map((item) => {
          return {
            label: item.depotName,
            value: item.id,
          }
        })
      })
    },

    handleDelete(id) {
      const ids = id || this.selectedRowKeys
      const url = this.url.delete + ids
      getAction(url)
        .then((res) => {
          this.$message.success('删除成功')
          this.loadData()
        })
        .catch((err) => {
          this.$message.error('删除失败')
        })
    },
    cancelTask() {
      const ids = this.selectedRowKeys
      const url = this.url.cancel + ids
      getAction(url)
        .then((res) => {
          this.$message.success('取消成功')
          this.loadData()
        })
        .catch((err) => {
          this.$message.error('取消失败')
        })
    },
    //开始盘点
    onStartTask() {
      const ids = this.selectedRowKeys
      const url = this.url.startTask + ids

      getAction(url)
        .then((res) => {
          this.$message.success('盘点成功')
          this.loadData()
        })
        .catch((err) => {
          this.$message.error('盘点失败')
        })
    },
    formateTaskStatus(type) {
      const target = this.taskStatusList.find(item => item.value == type)
      return target?target.label:''
    },
    getCheckboxProps(record) {
      return {
        props: {
          disabled: record.taskStatus !== 1,
        },
      }
    },
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>