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

<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :bordered="false" :style="cardStyle">
        <!-- 查询区域 -->
        <filter-form
          @search="onSearch"
          @reset="onReset"
          :queryParam="queryParam"
          :spinnerList="spinnerList"
          :deoptData="deoptData"
        ></filter-form>
        <div style="margin-bottom: 6px">
          <a-button type="primary" icon="plus" @click="addTask('add')">新增盘点任务</a-button>

          <a-popconfirm
            :disabled="!selectedRowKeys.length"
            style="margin: 0 6px"
            title="确定取消选中的盘点任务吗?"
            @confirm="() => cancelTask()"
          >
            <a-button :disabled="!selectedRowKeys.length">取消盘点</a-button>
          </a-popconfirm>
          <a-popconfirm
            :disabled="!selectedRowKeys.length"
            title="确定删除选中的盘点任务吗?"
            @confirm="() => handleDelete()"
          >
            <a-button :disabled="!selectedRowKeys.length">批量删除</a-button>
          </a-popconfirm>
          <!-- <a-button style="margin-left: 6px">导出任务</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,
          }"
          @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 !== 1" @click="addTask('edit', record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a :disabled="record.taskStatus !== 1 && record.taskStatus !== 4">删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-card>
    </a-col>
    <stock-modal
      :spinnerList="spinnerList"
      :deoptData="deoptData"
      :stockVisible.sync="stockVisible"
      :title="title"
      :rules="rules"
      :taskId="taskId"
      :openType="openType"
      ref="stockF"
    ></stock-modal>
  </a-row>
</template>

<script>
import FilterForm from './components/FilterForm.vue'
import table from './utils/table'
import StockModal from './components/stockModal.vue'
import { getAction, postAction } from '@/api/manage'
import { newTableMixin } from '@/mixins/newTableMixin'
import { mixinDevice } from '@/utils/mixin.js'

export default {
  components: { FilterForm, StockModal },
  mixins: [newTableMixin,mixinDevice],
  data() {
    return {
      description: '盘点任务列表',
      cardStyle: '',
      // 表头
      scroll: { x: 1500 },
      // 权限按钮集合
      btnEnableList: [1, 1, 1],
      queryParam: {
        taskStatus: undefined,
        number: '',
        depotId: undefined,
        createBy: undefined,
      },
      // stockTable: {
      //   loading: false,
      //   dataSource: [],
      //   columns: table.taskColumns,
      // },
      columns: table.taskColumns,
      dataSource: [],
      loading: false,

      rules: {
        taskType: { rules: [{ required: true, message: '请选择盘点类型' }] },
        depotId: { rules: [{ required: true, message: '请选择盘点仓库' }] },
        taskName: { rules: [{ required: true, message: '请输入盘点任务名称' }] },
      },

      // rules: {
      //   number: { rules: [{ required: true, message: '请输入盘点编号' }] },
      // },

      url: {
        list: '/stocktaking/list',
        add: '/stocktaking/add',
        detailList: '/stocktaking/detail',
        spinnerList: '/stocktaking/creatorSpinnerList',
        depotList: '/depot/findDepotByCurrentUser',
        detailByItemList: '/stocktaking/detailByItemList',
        delete: '/stocktaking/taskDelete/',
        cancel: '/stocktaking/taskCancel/',
      },
      stockVisible: false,
      title: '',
      spinnerList: [],
      deoptData: [],
      taskId: '',
      openType: 'add',
    }
  },
  watch: {
    stockVisible(val) {
      if (!val) {
        this.getList()
      }
    },
  },
  computed: {
    isDel() {
      return this.selectionRows.filter((item) => item.taskStatus !== 1 && item.taskStatus !== 4).length > 0
        ? true
        : false
    },
    isStock() {
      return this.selectionRows.filter((item) => item.taskStatus !== 1 && item.taskStatus !== 2).length > 0
        ? true
        : false
    },
  },

  created() {
    if (this.isDesktop()) {
      this.cardStyle = 'min-height:' + (document.documentElement.clientHeight - 100) + 'px'
    }
    this.getList()
    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
    },
    getList(type) {
      if (type === 'search') this.ipagination.current = 1 // 重新加载数据时，重置当前页为第一页
      if (type === 'reset') {
        for (let i in this.queryParam) {
          this.$set(this.queryParam, i, null)
        }
      }
      const url = this.url.list + '?currentPage=' + this.ipagination.current + '&pageSize=' + this.ipagination.pageSize
      this.loading = true
      const params = { ...this.queryParam }
      postAction(url, params).then((res) => {
        this.dataSource = res.data.rows
        this.ipagination.total = Number(res.data.total)
        this.loading = false
      })
    },
    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) {
      if (this.isDel) return this.$message.error('只能删除未开始或已取消的盘点任务，请重新选择！')

      const ids = id || this.selectedRowKeys
      const url = this.url.delete + ids
      getAction(url)
        .then((res) => {
          this.$message.success('删除成功')
          this.getList()
        })
        .catch((err) => {
          this.$message.error('删除失败')
        })
    },
    cancelTask() {
      if (this.isStock) return this.$message.error('只能取消未开始或进行中的盘点任务，请重新选择！')
      const ids = this.selectedRowKeys
      const url = this.url.cancel + ids
      getAction(url)
        .then((res) => {
          this.$message.success('取消成功')
          this.getList()
        })
        .catch((err) => {
          this.$message.error('取消失败')
        })
    },
  },
}
</script>

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