warehouseList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <template>
  2. <div>
  3. <en-table-layout :tableData="tableData.data" :loading="loading">
  4. <div slot="toolbar" class="inner-toolbar">
  5. <div class="toolbar-btns">
  6. <el-button size="mini" v-if="checkPermission(['warehouse:add'])" type="primary"
  7. @click="handleAddWarehouse">新增</el-button>
  8. </div>
  9. <div class="toolbar-search">
  10. <en-table-search @search="searchEvent" placeholder="请输入关键字搜索" />
  11. </div>
  12. </div>
  13. <template slot="table-columns">
  14. <el-table-column prop="sn" label="仓库编号" />
  15. <el-table-column prop="name" label="仓库名称" />
  16. <!-- <el-table-column prop="admin_id" label="负责人姓名">
  17. <template slot-scope="scope">
  18. {{ adminName(scope.row.admin_id) }}
  19. </template>
  20. </el-table-column> -->
  21. <el-table-column prop="phone" label="负责人手机号" />
  22. <el-table-column prop="name" label="仓库地址">
  23. <template slot-scope="scope">
  24. {{
  25. adminName(scope.row.ware_pro_city_area) +
  26. scope.row.warehouse_address || ""
  27. }}
  28. </template>
  29. </el-table-column>
  30. <el-table-column prop="description" label="仓库说明" />
  31. <el-table-column label="操作">
  32. <template slot-scope="scope">
  33. <el-button size="mini" v-if="checkPermission(['warehouse:update'])"
  34. @click="handleEditWarehouse(scope.$index, scope.row)">编辑</el-button>
  35. <!-- <el-button
  36. size="mini"
  37. v-if="checkPermission(['stock:del'])"
  38. type="danger"
  39. @click="handleDeleteWarehouse(scope.$index, scope.row)"
  40. >删除</el-button
  41. > -->
  42. </template>
  43. </el-table-column>
  44. </template>
  45. <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
  46. @current-change="handlePageCurrentChange" :current-page="tableData.page_no" :page-sizes="[10, 20, 50, 100]"
  47. :page-size="tableData.page_size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.data_total">
  48. </el-pagination>
  49. </en-table-layout>
  50. <el-dialog :title="stockForm.id ? '编辑仓库' : '添加仓库'" :visible.sync="dialogVisible" width="500px"
  51. @open="handleDialogOpen" :modal-append-to-body="false" :close-on-click-modal="false"
  52. :close-on-press-escape="false">
  53. <el-form :model="stockForm" :rules="stockRules" ref="stockForm" 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="发货人姓名" prop="">
  61. <el-input v-model="stockForm.user_name" :minlength="2" :maxlength="20" clearable placeholder="请输入发货人姓名"></el-input>
  62. <!-- <el-select v-model="stockForm.admin_id" clearable @change="selUser">
  63. <el-option v-for="item in marketingList" :key="item.id" :label="item.real_name" :value="item.id" />
  64. </el-select> -->
  65. </el-form-item>
  66. <el-form-item label="发货人电话" prop="phone">
  67. <el-input v-model="stockForm.phone" :minlength="2" :maxlength="20" clearable
  68. placeholder="请输入发货人电话"></el-input>
  69. </el-form-item>
  70. <el-form-item label="仓库地址" prop="">
  71. <el-cascader size="large" :options="options" clearable v-model="selectedOptions" >
  72. </el-cascader>
  73. <span>
  74. <el-input style="margin-top: 10px" v-model="stockForm.warehouse_address" placeholder="请输入"></el-input>
  75. </span>
  76. </el-form-item>
  77. <el-form-item label="备注" prop="description">
  78. <el-input v-model="stockForm.description" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
  79. placeholder="请输入备注"></el-input>
  80. </el-form-item>
  81. </el-form>
  82. <span slot="footer" class="dialog-footer">
  83. <el-button @click="dialogVisible = false">取 消</el-button>
  84. <el-button type="primary" @click="submitWarehouseForm">确 定</el-button>
  85. </span>
  86. </el-dialog>
  87. </div>
  88. </template>
  89. <script>
  90. import * as API_BasicSetting from "@/api/basicSetting";
  91. import * as API_Setting from "@/api/setting";
  92. import * as API_Auth from "@/api/auth";
  93. import { Foundation } from "~/ui-utils";
  94. import { mapGetters } from "vuex";
  95. import {
  96. provinceAndCityData,
  97. pcTextArr,
  98. regionData,
  99. pcaTextArr,
  100. codeToText,
  101. } from "element-china-area-data";
  102. export default {
  103. name: "warehouse",
  104. data() {
  105. return {
  106. deptList: [],
  107. adminList: [],
  108. // postList: [],
  109. // 列表loading状态
  110. loading: false,
  111. // 列表参数
  112. params: {
  113. page_no: 1,
  114. page_size: 10,
  115. },
  116. // 列表数据
  117. tableData: "",
  118. // 仓库表单
  119. stockForm: {
  120. phone: "",
  121. },
  122. // 仓库表单 规则
  123. stockRules: {
  124. sn: [{ required: true, message: "请输入仓库编号", trigger: "blur" }],
  125. name: [
  126. { required: true, message: "请选择输入仓库名称", trigger: "blur" },
  127. ],
  128. phone: [
  129. this.MixinRequired("请输入手机号码!"),
  130. {
  131. pattern: /^1[3456789]\d{9}$/,
  132. message: "手机号码格式不正确",
  133. trigger: "blur",
  134. },
  135. ],
  136. },
  137. // 仓库表单 dialog
  138. dialogVisible: false,
  139. options: regionData,
  140. selectedOptions: [],
  141. marketingList: [], // 销售经理列表
  142. };
  143. },
  144. mounted() {
  145. this.GET_WarehouseList();
  146. this.GET_DeptList();
  147. // this.GET_StationAllList()
  148. this.GET_AdministratorList();
  149. this.GET_MarketingList();
  150. },
  151. computed: {
  152. ...mapGetters(["user"]),
  153. },
  154. methods: {
  155. /* 选择负责人 */
  156. selUser(selectedUserId) {
  157. const selectedUser = this.marketingList.find(user => user.id === selectedUserId);
  158. this.stockForm.user_name = selectedUser ? selectedUser.real_name : null;
  159. this.stockForm.admin_id = selectedUser ? selectedUser.id : null;
  160. /* this.stockForm.user_name=val.real_name
  161. this.stockForm.admin_id=val.id */
  162. },
  163. /** 获取销售经理列表 */
  164. GET_MarketingList() {
  165. API_BasicSetting.getUserByDept().then((res) => {
  166. this.marketingList = res;
  167. });
  168. },
  169. adminName(val) {
  170. let text = "";
  171. if (val !== undefined) {
  172. text += codeToText[val[0]];
  173. text += codeToText[val[1]];
  174. text += codeToText[val[2]];
  175. }
  176. return text;
  177. },
  178. handleChange(value) {
  179. this.stockForm.ware_pro_city_area = value.join(",");
  180. /**/
  181. //打印区域码所对应的属性值即中文地址
  182. },
  183. /** 获取人员列表 */
  184. GET_AdministratorList() {
  185. API_Auth.getAdministratorList({
  186. page_no: 1,
  187. page_size: 9999,
  188. user_state: 0,
  189. }).then((response) => {
  190. this.adminList = response.data;
  191. });
  192. },
  193. // /** 获取岗位 */
  194. // GET_StationAllList() {
  195. // API_Setting.getStationAllList().then(response => {
  196. // this.postList = response
  197. // })
  198. // },
  199. /** 获取部门 */
  200. GET_DeptList() {
  201. API_Setting.getDeptList().then((response) => {
  202. this.deptList = Foundation.buildTree(response, "0");
  203. });
  204. console.log(
  205. JSON.parse(JSON.parse(localStorage.getItem("admin_user")).data)
  206. );
  207. },
  208. /** 分页大小发生改变 */
  209. handlePageSizeChange(size) {
  210. this.params.page_size = size;
  211. this.GET_WarehouseList();
  212. },
  213. /** 分页页数发生改变 */
  214. handlePageCurrentChange(page) {
  215. this.params.page_no = page;
  216. this.GET_WarehouseList();
  217. },
  218. /** 添加仓库 */
  219. handleAddWarehouse() {
  220. this.stockForm = {
  221. dept_id: 0,
  222. admin_id: this.user.uid,
  223. };
  224. this.dialogVisible = true;
  225. },
  226. /** 编辑仓库 */
  227. handleEditWarehouse(index, row) {
  228. this.stockForm = row;
  229. this.selectedOptions = row.ware_pro_city_area;
  230. this.dialogVisible = true;
  231. },
  232. /** 删除仓库 */
  233. handleDeleteWarehouse(index, row) {
  234. this.$confirm("确定要删除这个仓库吗?", "提示", { type: "warning" })
  235. .then(() => {
  236. API_BasicSetting.deleteWarehouse(row.id).then(() => {
  237. this.$message.success("删除成功!");
  238. this.GET_WarehouseList();
  239. });
  240. })
  241. .catch(() => { });
  242. },
  243. /** dialog打开后重置form表单校验结果 */
  244. handleDialogOpen() {
  245. setTimeout(() => {
  246. this.$refs["stockForm"].clearValidate();
  247. });
  248. },
  249. /** 提交仓库表单 */
  250. submitWarehouseForm() {
  251. this.$refs["stockForm"].validate((valid) => {
  252. if (valid) {
  253. const { id } = this.stockForm;
  254. const params = this.MixinClone(this.stockForm);
  255. if (!params.real_name) delete params.real_name;
  256. params.role_id === "超级仓库" ? (params.role_id = 0) : null;
  257. delete params.admin_name;
  258. params.admin_id = JSON.parse(
  259. JSON.parse(localStorage.getItem("admin_user")).data
  260. ).uid;
  261. params.ware_pro_city_area = this.selectedOptions.join(",");
  262. if (id) {
  263. API_BasicSetting.editWarehouse(id, params).then((response) => {
  264. this.dialogVisible = false;
  265. this.$message.success("修改成功!");
  266. this.GET_WarehouseList();
  267. });
  268. } else {
  269. API_BasicSetting.addWarehouse(params).then(() => {
  270. this.dialogVisible = false;
  271. this.$message.success("添加成功!");
  272. this.GET_WarehouseList();
  273. });
  274. }
  275. } else {
  276. this.$message.error("表单填写有误,请核对!");
  277. return false;
  278. }
  279. });
  280. },
  281. /** 搜索事件触发 */
  282. searchEvent(data) {
  283. this.params = {
  284. ...this.params,
  285. keyword: data,
  286. };
  287. this.params.page_no = 1;
  288. this.GET_WarehouseList();
  289. },
  290. /** 获取仓库列表 */
  291. GET_WarehouseList() {
  292. this.loading = true;
  293. API_BasicSetting.warehouse(this.params)
  294. .then((response) => {
  295. this.loading = false;
  296. response.data.map((el) => {
  297. if (el.ware_pro_city_area !== undefined) {
  298. el.ware_pro_city_area = el.ware_pro_city_area.split(",");
  299. }
  300. return el;
  301. });
  302. this.tableData = response;
  303. })
  304. .catch(() => {
  305. this.loading = false;
  306. });
  307. },
  308. },
  309. };
  310. </script>
  311. <style type="text/scss" lang="scss" scoped>
  312. .face-image {
  313. display: block;
  314. width: 50px;
  315. height: 50px;
  316. margin: 0 auto;
  317. }
  318. /deep/ .el-dialog__body {
  319. padding: 10px 20px;
  320. }
  321. </style>