warehouseList.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <div>
  3. <en-table-layout :tableData="tableData.data" :loading="loading">
  4. <template #toolbar>
  5. <div class="inner-toolbar w-11/12 flex justify-between">
  6. <div class="toolbar-btns">
  7. <el-button size="mini" v-if="checkPermission(['warehouse:add'])" type="primary" @click="handleAddWarehouse">新增</el-button>
  8. </div>
  9. <div class="toolbar-search">
  10. <en-table-search @search="searchEvent" placeholder="请输入关键字搜索" />
  11. </div>
  12. </div>
  13. </template>
  14. <template #table-columns>
  15. <el-table-column prop="sn" label="仓库编号" />
  16. <el-table-column prop="name" label="仓库名称" />
  17. <el-table-column prop="phone" label="负责人手机号" />
  18. <el-table-column prop="name" label="仓库地址">
  19. <template #default="scope">
  20. {{ adminName(scope.row.ware_pro_city_area) + scope.row.warehouse_address || '' }}
  21. </template>
  22. </el-table-column>
  23. <el-table-column prop="description" label="仓库说明" />
  24. <el-table-column label="操作">
  25. <template #default="scope">
  26. <el-button size="mini" v-if="checkPermission(['warehouse:update'])" @click="handleEditWarehouse(scope.$index, scope.row)">编辑</el-button>
  27. </template>
  28. </el-table-column>
  29. </template>
  30. <template #pagination>
  31. <el-pagination
  32. v-if="tableData.data && tableData.data.length"
  33. @size-change="handlePageSizeChange"
  34. @current-change="handlePageCurrentChange"
  35. :current-page="tableData.page_no"
  36. :page-sizes="[10, 20, 50, 100]"
  37. :page-size="tableData.page_size"
  38. layout="total, sizes, prev, pager, next, jumper"
  39. :total="tableData.data_total"
  40. >
  41. </el-pagination>
  42. </template>
  43. </en-table-layout>
  44. <el-dialog
  45. :title="stockForm.id ? '编辑仓库' : '添加仓库'"
  46. v-model="dialogVisible"
  47. width="500px"
  48. @open="handleDialogOpen"
  49. :modal-append-to-body="false"
  50. :close-on-click-modal="false"
  51. :close-on-press-escape="false"
  52. >
  53. <el-form :model="stockForm" :rules="stockRules" ref="stockFormRef" label-width="120px">
  54. <el-form-item label="仓库编号" prop="sn">
  55. <el-input v-model="stockForm.sn" :minlength="2" :maxlength="4" clearable placeholder="请输入仓库编号"></el-input>
  56. </el-form-item>
  57. <el-form-item label="仓库名称" prop="name">
  58. <el-input v-model="stockForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入仓库名称"></el-input>
  59. </el-form-item>
  60. <el-form-item label="发货人姓名">
  61. <el-input v-model="stockForm.user_name" :minlength="2" :maxlength="20" clearable placeholder="请输入发货人姓名"></el-input>
  62. </el-form-item>
  63. <el-form-item label="发货人电话" prop="phone">
  64. <el-input v-model="stockForm.phone" :minlength="2" :maxlength="20" clearable placeholder="请输入发货人电话"></el-input>
  65. </el-form-item>
  66. <el-form-item label="仓库地址">
  67. <el-cascader size="large" :options="options" clearable v-model="selectedOptions"> </el-cascader>
  68. <span>
  69. <el-input style="margin-top: 10px" v-model="stockForm.warehouse_address" placeholder="请输入"></el-input>
  70. </span>
  71. </el-form-item>
  72. <el-form-item label="备注" prop="description">
  73. <el-input v-model="stockForm.description" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入备注"></el-input>
  74. </el-form-item>
  75. </el-form>
  76. <template #footer>
  77. <div class="dialog-footer">
  78. <el-button @click="dialogVisible = false">取 消</el-button>
  79. <el-button type="primary" @click="submitWarehouseForm">确 定</el-button>
  80. </div>
  81. </template>
  82. </el-dialog>
  83. </div>
  84. </template>
  85. <script lang="ts" setup>
  86. import { ref, onMounted } from 'vue';
  87. import { useStore } from 'vuex';
  88. import { ElMessageBox,FormInstance,ElMessage } from 'element-plus';
  89. import * as API_BasicSetting from '@/api/basicSetting';
  90. import * as API_Setting from '@/api/setting';
  91. import * as API_Auth from '@/api/auth';
  92. import Storage from '@/utils/storage';
  93. import router from '@/router';
  94. import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
  95. const store = useStore();
  96. const tableData = ref<any>({});
  97. const loading = ref(false);
  98. const dialogVisible = ref(false);
  99. const stockForm = ref<any>({
  100. sn: '',
  101. name: '',
  102. user_name: '',
  103. phone: '',
  104. warehouse_address: '',
  105. description: '',
  106. ware_pro_city_area: []
  107. });
  108. const stockRules = ref<any>({
  109. sn: [{ required: true, message: '请输入仓库编号', trigger: 'blur' }],
  110. name: [{ required: true, message: '请选择输入仓库名称', trigger: 'blur' }],
  111. phone: [
  112. // { required: true, message: '请输入手机号码!', trigger: 'blur' },
  113. // { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }, options: regionData,
  114. ],
  115. });
  116. const selectedOptions = ref<any[]>([]);
  117. const options = ref<any[]>(regionData);
  118. const marketingList = ref<any[]>([]);
  119. const params = ref({
  120. data: [],
  121. page_no: 1,
  122. page_size: 10,
  123. keyword: '',
  124. });
  125. const stockFormRef = ref();
  126. const checkPermission = (permissions: string[]): boolean => {
  127. // Implement your permission check logic here
  128. return true;
  129. };
  130. const handleAddWarehouse = () => {
  131. stockForm.value = {
  132. dept_id: 0,
  133. admin_id: store.getters.user.uid,
  134. };
  135. dialogVisible.value = true;
  136. };
  137. const handleEditWarehouse = (index: number, row: any) => {
  138. stockForm.value = { ...row };
  139. selectedOptions.value = row.ware_pro_city_area;
  140. dialogVisible.value = true;
  141. };
  142. const searchEvent = (keyword: string) => {
  143. params.value = {
  144. ...params.value,
  145. keyword: keyword,
  146. };
  147. params.value.page_no = 1;
  148. GET_WarehouseList();
  149. };
  150. const handlePageSizeChange = (size: number) => {
  151. params.value.page_size = size;
  152. GET_WarehouseList();
  153. };
  154. const handlePageCurrentChange = (page: number) => {
  155. params.value.page_no = page;
  156. GET_WarehouseList();
  157. };
  158. const handleDialogOpen = () => {
  159. setTimeout(() => {
  160. stockFormRef.value.clearValidate();
  161. });
  162. };
  163. const submitWarehouseForm = () => {
  164. stockFormRef.value.validate((valid: boolean) => {
  165. if (valid) {
  166. const { id } = stockForm.value;
  167. const params = { ...stockForm.value };
  168. if (!params.real_name) delete params.real_name;
  169. params.role_id === '超级仓库' ? (params.role_id = 0) : null;
  170. delete params.admin_name;
  171. params.admin_id = JSON.parse(JSON.parse(localStorage.getItem('admin_user')!).data).uid;
  172. params.ware_pro_city_area = selectedOptions.value.join(',');
  173. if (id) {
  174. API_BasicSetting.editWarehouse(id, params).then(() => {
  175. dialogVisible.value = false;
  176. ElMessage.success('修改成功!')
  177. //store.dispatch('showMessage', { message: '修改成功!', type: 'success' });
  178. GET_WarehouseList();
  179. });
  180. } else {
  181. API_BasicSetting.addWarehouse(params).then(() => {
  182. dialogVisible.value = false;
  183. ElMessage.success('添加成功!')
  184. /* store.dispatch('showMessage', { message: '添加成功!', type: 'success' }); */
  185. GET_WarehouseList();
  186. });
  187. }
  188. } else {
  189. ElMessage.error('表单填写有误,请核对!')
  190. /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
  191. return false;
  192. }
  193. });
  194. };
  195. const GET_WarehouseList = () => {
  196. loading.value = true;
  197. API_BasicSetting.warehouse(params.value)
  198. .then((response) => {
  199. loading.value = false;
  200. response.data.map((el: any) => {
  201. if (el.ware_pro_city_area !== undefined) {
  202. el.ware_pro_city_area = el.ware_pro_city_area.split(',');
  203. }
  204. return el;
  205. });
  206. tableData.value = response;
  207. console.log(tableData.value);
  208. })
  209. .catch(() => {
  210. loading.value = false;
  211. });
  212. };
  213. const GET_MarketingList = () => {
  214. API_BasicSetting.getUserByDept().then((res) => {
  215. marketingList.value = res;
  216. });
  217. };
  218. const adminName = (val: string[]) => {
  219. let text = '';
  220. if (val !== undefined) {
  221. text += codeToText[val[0]];
  222. text += codeToText[val[1]];
  223. text += codeToText[val[2]];
  224. }
  225. return text;
  226. };
  227. onMounted(() => {
  228. GET_WarehouseList();
  229. //GET_MarketingList();
  230. });
  231. </script>