index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. <template>
  2. <ContentWrap>
  3. <!-- 搜索工作栏 -->
  4. <el-form
  5. class="-mb-15px"
  6. :model="queryParams"
  7. ref="queryFormRef"
  8. :inline="true"
  9. label-width="68px"
  10. >
  11. <el-form-item label="调度单号" prop="no">
  12. <el-input
  13. v-model="queryParams.no"
  14. placeholder="请输入调度单号"
  15. clearable
  16. @keyup.enter="handleQuery"
  17. class="!w-240px"
  18. />
  19. </el-form-item>
  20. <el-form-item label="产品" prop="productId">
  21. <el-select
  22. v-model="queryParams.productId"
  23. filterable
  24. placeholder="请选择产品"
  25. class="!w-240px"
  26. >
  27. <el-option
  28. v-for="item in productList"
  29. :key="item.id"
  30. :label="item.name"
  31. :value="item.id"
  32. />
  33. </el-select>
  34. </el-form-item>
  35. <el-form-item label="调度时间" prop="moveTime">
  36. <el-date-picker
  37. v-model="queryParams.inTime"
  38. value-format="YYYY-MM-DD HH:mm:ss"
  39. type="daterange"
  40. start-placeholder="开始日期"
  41. end-placeholder="结束日期"
  42. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  43. class="!w-240px"
  44. />
  45. </el-form-item>
  46. <el-form-item label="仓库" prop="fromWarehouseId">
  47. <el-select
  48. v-model="queryParams.fromWarehouseId"
  49. filterable
  50. placeholder="请选择仓库"
  51. class="!w-240px"
  52. >
  53. <el-option
  54. v-for="item in warehouseList"
  55. :key="item.id"
  56. :label="item.name"
  57. :value="item.id"
  58. />
  59. </el-select>
  60. </el-form-item>
  61. <el-form-item label="创建人" prop="creator">
  62. <el-select
  63. v-model="queryParams.creator"
  64. filterable
  65. placeholder="请选择创建人"
  66. class="!w-240px"
  67. >
  68. <el-option
  69. v-for="item in userList"
  70. :key="item.id"
  71. :label="item.nickname"
  72. :value="item.id"
  73. />
  74. </el-select>
  75. </el-form-item>
  76. <el-form-item label="状态" prop="status">
  77. <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
  78. <el-option
  79. v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)"
  80. :key="dict.value"
  81. :label="dict.label"
  82. :value="dict.value"
  83. />
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="备注" prop="remark">
  87. <el-input
  88. v-model="queryParams.remark"
  89. placeholder="请输入备注"
  90. clearable
  91. @keyup.enter="handleQuery"
  92. class="!w-240px"
  93. />
  94. </el-form-item>
  95. <el-form-item>
  96. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  97. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  98. <el-button
  99. type="primary"
  100. plain
  101. @click="openForm('create')"
  102. v-hasPermi="['erp:stock-move:create']"
  103. >
  104. <Icon icon="ep:plus" class="mr-5px" /> 新增
  105. </el-button>
  106. <el-button
  107. type="success"
  108. plain
  109. @click="handleExport"
  110. :loading="exportLoading"
  111. v-hasPermi="['erp:stock-move:export']"
  112. >
  113. <Icon icon="ep:download" class="mr-5px" /> 导出
  114. </el-button>
  115. <el-button
  116. type="danger"
  117. plain
  118. @click="handleDelete(selectionList.map((item) => item.id))"
  119. v-hasPermi="['erp:stock-move:delete']"
  120. :disabled="selectionList.length === 0"
  121. >
  122. <Icon icon="ep:delete" class="mr-5px" /> 删除
  123. </el-button>
  124. </el-form-item>
  125. </el-form>
  126. </ContentWrap>
  127. <!-- 列表 -->
  128. <ContentWrap>
  129. <el-table
  130. v-loading="loading"
  131. :data="list"
  132. :stripe="true"
  133. :show-overflow-tooltip="true"
  134. @selection-change="handleSelectionChange"
  135. >
  136. <el-table-column width="30" label="选择" type="selection" />
  137. <el-table-column min-width="140" label="调度单号" align="center" prop="no" />
  138. <el-table-column label="产品信息" align="center" prop="productNames" min-width="200" />
  139. <el-table-column
  140. label="调度时间"
  141. align="center"
  142. prop="moveTime"
  143. :formatter="dateFormatter2"
  144. width="120px"
  145. />
  146. <el-table-column label="创建人" align="center" prop="creatorName" />
  147. <el-table-column
  148. label="数量"
  149. align="center"
  150. prop="totalCount"
  151. :formatter="erpCountTableColumnFormatter"
  152. />
  153. <el-table-column
  154. label="金额"
  155. align="center"
  156. prop="totalPrice"
  157. :formatter="erpPriceTableColumnFormatter"
  158. />
  159. <el-table-column label="状态" align="center" fixed="right" width="90" prop="status">
  160. <template #default="scope">
  161. <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status" />
  162. </template>
  163. </el-table-column>
  164. <el-table-column label="操作" align="center" fixed="right" width="220">
  165. <template #default="scope">
  166. <el-button
  167. link
  168. @click="openForm('detail', scope.row.id)"
  169. v-hasPermi="['erp:stock-move:query']"
  170. >
  171. 详情
  172. </el-button>
  173. <el-button
  174. link
  175. type="primary"
  176. @click="openForm('update', scope.row.id)"
  177. v-hasPermi="['erp:stock-move:update']"
  178. :disabled="scope.row.status === 20"
  179. >
  180. 编辑
  181. </el-button>
  182. <el-button
  183. link
  184. type="primary"
  185. @click="handleUpdateStatus(scope.row.id, 20)"
  186. v-hasPermi="['erp:stock-move:update-status']"
  187. v-if="scope.row.status === 10"
  188. >
  189. 审批
  190. </el-button>
  191. <el-button
  192. link
  193. type="danger"
  194. @click="handleUpdateStatus(scope.row.id, 10)"
  195. v-hasPermi="['erp:stock-move:update-status']"
  196. v-else
  197. >
  198. 反审批
  199. </el-button>
  200. <el-button
  201. link
  202. type="danger"
  203. @click="handleDelete([scope.row.id])"
  204. v-hasPermi="['erp:stock-move:delete']"
  205. >
  206. 删除
  207. </el-button>
  208. </template>
  209. </el-table-column>
  210. </el-table>
  211. <!-- 分页 -->
  212. <Pagination
  213. :total="total"
  214. v-model:page="queryParams.pageNo"
  215. v-model:limit="queryParams.pageSize"
  216. @pagination="getList"
  217. />
  218. </ContentWrap>
  219. <!-- 表单弹窗:添加/修改 -->
  220. <StockMoveForm ref="formRef" @success="getList" />
  221. </template>
  222. <script setup lang="ts">
  223. import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
  224. import { dateFormatter2 } from '@/utils/formatTime'
  225. import download from '@/utils/download'
  226. import { StockMoveApi, StockMoveVO } from '@/api/erp/stock/move'
  227. import StockMoveForm from './StockMoveForm.vue'
  228. import { ProductApi, ProductVO } from '@/api/erp/product/product'
  229. import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
  230. import { UserVO } from '@/api/system/user'
  231. import * as UserApi from '@/api/system/user'
  232. import { erpCountTableColumnFormatter, erpPriceTableColumnFormatter } from '@/utils'
  233. /** ERP 库存调度单列表 */
  234. defineOptions({ name: 'ErpStockMove' })
  235. const message = useMessage() // 消息弹窗
  236. const { t } = useI18n() // 国际化
  237. const loading = ref(true) // 列表的加载中
  238. const list = ref<StockMoveVO[]>([]) // 列表的数据
  239. const total = ref(0) // 列表的总页数
  240. const queryParams = reactive({
  241. pageNo: 1,
  242. pageSize: 10,
  243. no: undefined,
  244. fromWarehouseId: undefined,
  245. moveTime: [],
  246. status: undefined,
  247. remark: undefined,
  248. creator: undefined
  249. })
  250. const queryFormRef = ref() // 搜索的表单
  251. const exportLoading = ref(false) // 导出的加载中
  252. const productList = ref<ProductVO[]>([]) // 产品列表
  253. const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
  254. const userList = ref<UserVO[]>([]) // 用户列表
  255. /** 查询列表 */
  256. const getList = async () => {
  257. loading.value = true
  258. try {
  259. const data = await StockMoveApi.getStockMovePage(queryParams)
  260. list.value = data.list
  261. total.value = data.total
  262. } finally {
  263. loading.value = false
  264. }
  265. }
  266. /** 搜索按钮操作 */
  267. const handleQuery = () => {
  268. queryParams.pageNo = 1
  269. getList()
  270. }
  271. /** 重置按钮操作 */
  272. const resetQuery = () => {
  273. queryFormRef.value.resetFields()
  274. handleQuery()
  275. }
  276. /** 添加/修改操作 */
  277. const formRef = ref()
  278. const openForm = (type: string, id?: number) => {
  279. formRef.value.open(type, id)
  280. }
  281. /** 删除按钮操作 */
  282. const handleDelete = async (ids: number[]) => {
  283. try {
  284. // 删除的二次确认
  285. await message.delConfirm()
  286. // 发起删除
  287. await StockMoveApi.deleteStockMove(ids)
  288. message.success(t('common.delSuccess'))
  289. // 刷新列表
  290. await getList()
  291. selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
  292. } catch {}
  293. }
  294. /** 审批/反审批操作 */
  295. const handleUpdateStatus = async (id: number, status: number) => {
  296. try {
  297. // 审批的二次确认
  298. await message.confirm(`确定${status === 20 ? '审批' : '反审批'}该调度单吗?`)
  299. // 发起审批
  300. await StockMoveApi.updateStockMoveStatus(id, status)
  301. message.success(`${status === 20 ? '审批' : '反审批'}成功`)
  302. // 刷新列表
  303. await getList()
  304. } catch {}
  305. }
  306. /** 导出按钮操作 */
  307. const handleExport = async () => {
  308. try {
  309. // 导出的二次确认
  310. await message.exportConfirm()
  311. // 发起导出
  312. exportLoading.value = true
  313. const data = await StockMoveApi.exportStockMove(queryParams)
  314. download.excel(data, '库存调度单.xls')
  315. } catch {
  316. } finally {
  317. exportLoading.value = false
  318. }
  319. }
  320. /** 选中操作 */
  321. const selectionList = ref<StockMoveVO[]>([])
  322. const handleSelectionChange = (rows: StockMoveVO[]) => {
  323. selectionList.value = rows
  324. }
  325. /** 初始化 **/
  326. onMounted(async () => {
  327. await getList()
  328. // 加载产品、仓库列表、客户
  329. productList.value = await ProductApi.getProductSimpleList()
  330. warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
  331. userList.value = await UserApi.getSimpleUserList()
  332. })
  333. // TODO 芋艿:可优化功能:列表界面,支持导入
  334. // TODO 芋艿:可优化功能:详情界面,支持打印
  335. </script>