delivery-depot-vue/src/views/DeliveryWarehouse/compontents/Form.vue

<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="80%">
    <div>
      <a-table
        v-loading="formLoading"
        v-model:selectedKeys="selectedKeys"
        :bordered="{wrapper: true, cell: true}"
        :columns="tableColumns"
        :data="list"
        :row-selection="rowSelection"
        row-key="id"
      >
        <template #kqmc-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset}">
          <div class="custom-filter">
            <a-space direction="vertical">
              <a-input :model-value="filterValue[0]" @input="(value)=>setFilterValue([value])" />
              <div class="custom-filter-footer">
                <a-button type="primary"  @click="handleFilterConfirm">搜索</a-button>
                <a-button @click="handleFilterReset">取消</a-button>
              </div>
            </a-space>
          </div>
        </template>
        <template #cfmc-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset}">
          <div class="custom-filter">
            <a-space direction="vertical">
              <a-input :model-value="filterValue[0]" @input="(value)=>setFilterValue([value])" />
              <div class="custom-filter-footer">
                <a-button type="primary"  @click="handleFilterConfirm">搜索</a-button>
                <a-button @click="handleFilterReset">取消</a-button>
              </div>
            </a-space>
          </div>
        </template>
        <template #cflx="{record }">
          <dict-tag :type="DICT_TYPE.SYSTEM_CFLX" :value="record.cflx"/>
        </template>
        <template #cazt="{record }">
          <dict-tag :type="DICT_TYPE.SYSTEM_CAZT" :value="record.cazt"/>
        </template>
        <template #edit="{record }">
          <el-button size="small" type="danger" @click="backRow(record)">
            退回
          </el-button>
        </template>
      </a-table>
    </div>
    <template #footer>
      <el-button
        v-if="formType=='select' || formType == 'back'" :disabled="formLoading"
        type="primary" @click="submitForm"> {{ formType == 'select' ? '确 定' : '批量退回' }}
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {DeliveryWarehouseSelectApi} from '@/api/DeliveryWarehouse/DeliveryWarehouseSelect'
import {DICT_TYPE} from '@/utils/dict'
import {TableColumnData, TableRowSelection} from "@arco-design/web-vue";
import {YxcfEnum} from "@/enum/yxcfEnum";
import {IconSearch} from "@arco-design/web-vue/es/icon";

// 接口定义
interface QueryParams {
  pageNo: number
  pageSize: number
}

interface TableRow {
  id: number | string
  kqmc: string // 库区名称
  camc: string // 仓廒名称
  cflx: string // 仓房类型
  cazt: string // 仓房状态
  sjcr: number // 设计仓容
}

// interface ListItem {
//   sheng: string // 省份
//   shi: string // 市区
//   xian: string // 县区
//   dwmc: string // 企业名称
//   kqmc: string // 库区名称
//   sjcrNum: string // 实际仓容数量
//   cfnum: string // 仓房数量
//   yxcfnum: string // 已选仓房数量
// }

// interface SubmitData extends ListItem{
//   ids: (number | string)[]
//   yxcf: number
//
// }

// 组件配置
defineOptions({name: 'DeliveryWarehouseSelectForm'})


// 组件状态
const dialogVisible = ref(false)
const dialogTitle = ref('仓房列表')
const formLoading = ref(false)
const formType = ref('')
// 查询参数
const queryParams = ref<QueryParams>({
  pageNo: 1,
  pageSize: 10
})
// 表格数据
const list = ref<TableRow[]>([])
// 表格列
const tableColumns = ref<TableColumnData[]>([
  {
    title: '库区名称',
    dataIndex: 'kqmc',
    align: 'center',
    filterable: {
      filter: (value, record) => record.kqmc.includes(value),
      slotName: 'kqmc-filter',
      icon: () => h(IconSearch)
    }
  },
  {
    title: '仓房名称',
    dataIndex: 'cfmc',
    align: 'center',
    filterable: {
      filter: (value, record) => record.cfmc.includes(value),
      slotName: 'cfmc-filter',
      icon: () => h(IconSearch)
    }
  },
  {
    title: '仓房类型',
    dataIndex: 'cflx',
    slotName: 'cflx',
    align: 'center'
  },
  {
    title: '仓房状态',
    dataIndex: 'cazt',
    slotName: 'cazt',
    align: 'center'
  },
  {
    title: '设计仓容（吨）',
    dataIndex: 'sjcr',
    align: 'center'
  }
])
const tableColumnsTemp: TableColumnData[] = [
  {
    title: '库区名称',
    dataIndex: 'kqmc',
    align: 'center',
    filterable: {
      filter: (value, record) => record.kqmc.includes(value),
      slotName: 'kqmc-filter',
      icon: () => h(IconSearch)
    }
  },
  {
    title: '仓房名称',
    dataIndex: 'cfmc',
    align: 'center',
    filterable: {
      filter: (value, record) => record.cfmc.includes(value),
      slotName: 'cfmc-filter',
      icon: () => h(IconSearch)
    }
  },
  {
    title: '仓房类型',
    dataIndex: 'cflx',
    slotName: 'cflx',
    align: 'center'
  },
  {
    title: '仓房状态',
    dataIndex: 'cazt',
    slotName: 'cazt',
    align: 'center'
  },
  {
    title: '设计仓容（吨）',
    dataIndex: 'sjcr',
    align: 'center'
  }]
// 表格选择
const rowSelection = reactive<TableRowSelection>({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const selectedKeys = ref<(string | number)[]>([])


/**
 * 打开弹窗
 */
const open = async (type: string, row?: any) => {
  dialogVisible.value = true
  formType.value = type;
  selectedKeys.value = []
  if (formType.value == 'look') {
    rowSelection.type = undefined
  }

  if (row.yxcf == YxcfEnum.RdjskBank) {
    tableColumns.value = [...tableColumnsTemp,
      {
        title: '认定银行',
        dataIndex: 'rdyhName',
        slotName: 'rdyhName',
        align: 'center'
      }
    ]
  } else if (row.yxcf == YxcfEnum.XdjskCfxx) {
    tableColumns.value = [...tableColumnsTemp,
      {
        title: '认定银行',
        dataIndex: 'rdyhName',
        slotName: 'rdyhName',
        align: 'center'
      },
      {
        title: '选定单位名称',
        dataIndex: 'nickname',
        slotName: 'nickname',
        align: 'center'
      },
      {
        title: '选定人联系方式',
        dataIndex: 'mobile',
        slotName: 'mobile',
        align: 'center'
      },
      {
        title: '储存状态',
        dataIndex: 'cczt',
        slotName: 'cczt',
        align: 'center'
      }
    ]
  } else {
    tableColumns.value = [...tableColumnsTemp]
  }
  if (formType.value == 'back') {
    tableColumns.value.push({
      title: '操作',
      dataIndex: 'edit',
      slotName: 'edit',
      align: 'center'
    })
  } else {
    tableColumns.value.filter((item) => {
      return item.dataIndex !== 'edit'
    })
  }
  resetForm()
  try {
    formLoading.value = true
    queryParams.value = row
    await handleQuery()
  } finally {
    formLoading.value = false
  }
}

/**
 * 查询列表数据
 */
const handleQuery = async () => {
  try {
    list.value = await DeliveryWarehouseSelectApi.getDeliveryWarehouseSelectList(queryParams.value)
  } catch (err) {
    throw err
  }
}

/**
 * 重置表单
 */
const resetForm = () => {
  list.value = []
}


/**
 * 处理选择变更
 */


/**
 * 提交表单
 */
const submitForm = async () => {
  if (!selectedKeys.value?.length) {
    Message.warning('请至少选择一个需要退回的仓房!')
    return
  }
  formLoading.value = true
  await nextTick();
  try {
    const submitData: any = {
      ids: selectedKeys.value,
      ...queryParams.value
    }
    if (formType.value === 'select') {
       //存储id的list，找到对应id的数据
      submitData.storeRespVOList = list.value.filter((item) => selectedKeys.value.includes(item.id))
      await DeliveryWarehouseSelectApi.submitSelectList(submitData)
      Message.success("数据已提交到备选交收库")
    } else if (formType.value == 'back') {
      await DeliveryWarehouseSelectApi.returnToWarehouse(submitData)
      Message.success("数据已退回到交收仓选择")
    } else {
      return
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}
const backRow = async (row) => {
  try {
    await ElMessageBox.confirm('确认要退回的所选的库区？', '提示', {type:'warning'});
    const submitData: any = {
      ids: [row.id],
      ...queryParams.value
    }
    await DeliveryWarehouseSelectApi.returnToWarehouse(submitData)
    await handleQuery()
    Message.success("数据已退回到交收仓选择")
  } catch (err) {
    throw err
  }
}
// 监听
// const stopWatches: (() => void)[] = [];
// stopWatches.push(
//   watch(()=> formType.value)
// )
// onBeforeUnmount(() => {
//   stopWatches.forEach((stop) => stop())
// })
// 暴露方法
defineExpose({open})

// 定义事件
const emit = defineEmits(['success'])


</script>

<style lang="scss" scoped>
.mb-50px {
  margin-bottom: 50px;
}

:deep(.arco-table-element thead .arco-table-tr .arco-table-th) {
  background: var(--table-header-bg-color);
  font-weight: 700;
  height: 30px;
}

:deep(.arco-table .arco-table-cell) {
  //padding: 0px 0px;
}

:deep(.arco-table-border-cell .arco-table-th, .arco-table-border-cell .arco-table-td:not(.arco-table-tr-expand)) {
  border-right: 1px solid var(--color-neutral-3);
  background: var(--color-fill-2);
}
.custom-filter {
  padding: 20px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
}
</style>