index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <div id="deliveryAddressList">
  3. <div v-if="isList">
  4. <el-form class="search_area" label-width="120px">
  5. <el-row :gutter="10">
  6. <el-col :span="1.5">
  7. <el-form-item label="仓库属性">
  8. <el-select clearable v-model="queryParams.warehouseProperty" size="small" style="width: 200px">
  9. <el-option v-for="dict in dict.type.sys_warehouse_attribute" :key="dict.value" :label="dict.label" :value="dict.value">
  10. </el-option>
  11. </el-select>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :span="1.5">
  15. <el-form-item label="仓库档案名称">
  16. <el-select clearable size="small" v-model="queryParams.warehouseName" @focus="chooseRefer('WAREHOUSE_PARAM', true, '仓库档案名称')" style="width: 200px">
  17. <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.name" />
  18. </el-select>
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="1.5">
  22. <el-form-item label="收货仓库编码">
  23. <el-input
  24. v-model="queryParams.code"
  25. size="small"
  26. clearable
  27. style="width: 200px"
  28. />
  29. </el-form-item>
  30. </el-col>
  31. <el-col :span="1.5">
  32. <el-form-item label="收货仓库名称">
  33. <el-input
  34. v-model="queryParams.name"
  35. size="small"
  36. clearable
  37. style="width: 200px"
  38. />
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="1.5">
  42. <el-form-item label="" label-width="20px">
  43. <el-button type="primary" size="small" icon="el-icon-search" plain @click="searchList">搜索</el-button>
  44. <el-button size="small" icon="el-icon-refresh" plain @click="resetList">重置</el-button>
  45. </el-form-item>
  46. </el-col>
  47. </el-row>
  48. <CollapseTransition>
  49. <div v-show="expanded">
  50. <el-row :gutter="10">
  51. <el-col :span="1.5">
  52. <el-form-item label="物料分类">
  53. <el-select
  54. v-model="queryParams.materialClassifyName"
  55. size="small"
  56. clearable
  57. @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '物料分类')"
  58. style="width: 200px"
  59. >
  60. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.name" />
  61. </el-select>
  62. </el-form-item>
  63. </el-col>
  64. <el-col :span="1.5">
  65. <el-form-item label="详细地址">
  66. <el-input
  67. v-model="queryParams.address"
  68. size="small"
  69. placeholder=""
  70. clearable
  71. style="width: 200px"
  72. />
  73. </el-form-item>
  74. </el-col>
  75. <el-col :span="1.5">
  76. <el-form-item label="联系人">
  77. <el-select clearable size="small" v-model="queryParams.contactsName" clearable @focus="chooseRefer('CONTACTS_PARAM', true, '联系人')" style="width: 200px">
  78. <el-option v-for="item in contactsOptions" :key="item.id" :label="item.name" :value="item.name" />
  79. </el-select>
  80. </el-form-item>
  81. </el-col>
  82. <el-col :span="1.5">
  83. <el-form-item label="联系人电话">
  84. <el-input
  85. v-model="queryParams.contactsPhone"
  86. size="small"
  87. clearable
  88. style="width: 200px"
  89. />
  90. </el-form-item>
  91. </el-col>
  92. </el-row>
  93. <el-row :gutter="10">
  94. <el-col :span="1.5">
  95. <el-form-item label="备注">
  96. <el-input
  97. v-model="queryParams.remark"
  98. size="small"
  99. clearable
  100. style="width: 200px"
  101. />
  102. </el-form-item>
  103. </el-col>
  104. <el-col :span="1.5">
  105. <el-form-item label="同步状态">
  106. <el-select v-model="queryParams.sendStatus" size="small" style="width: 200px" clearable>
  107. <el-option
  108. v-for="item in options2"
  109. :key="item.value"
  110. :label="item.label"
  111. :value="item.value">
  112. </el-option>
  113. </el-select>
  114. </el-form-item>
  115. </el-col>
  116. <el-col :span="1.5">
  117. <el-form-item label="启用">
  118. <el-select v-model="queryParams.status" size="small" style="width: 200px" clearable>
  119. <el-option
  120. v-for="item in options"
  121. :key="item.value"
  122. :label="item.label"
  123. :value="item.value">
  124. </el-option>
  125. </el-select>
  126. </el-form-item>
  127. </el-col>
  128. </el-row>
  129. </div>
  130. </CollapseTransition>
  131. </el-form>
  132. <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
  133. <el-card>
  134. <div class="btn_grooup">
  135. <el-button type="primary" size="small" @click="addAddress">新增</el-button>
  136. <el-dropdown size="small" @command="handleCommand">
  137. <el-button size="small" type="primary" style="margin-left: 10px;">
  138. 导入<i class="el-icon-arrow-down el-icon--right"></i>
  139. </el-button>
  140. <el-dropdown-menu slot="dropdown">
  141. <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
  142. <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
  143. </el-dropdown-menu>
  144. </el-dropdown>
  145. <el-dropdown size="small" @command="handleCommand">
  146. <el-button size="small" type="primary" style="margin: 0 10px;">
  147. 导出<i class="el-icon-arrow-down el-icon--right"></i>
  148. </el-button>
  149. <el-dropdown-menu slot="dropdown">
  150. <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
  151. <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
  152. </el-dropdown-menu>
  153. </el-dropdown>
  154. <el-button type="primary" size="small">启用</el-button>
  155. <el-button type="primary" size="small">停用</el-button>
  156. <el-button type="primary" size="small">同步NC</el-button>
  157. <el-button type="primary" size="small">删除</el-button>
  158. </div>
  159. <el-table
  160. :data="tableList"
  161. fit
  162. max-height="480"
  163. @selection-change="handleSelectionChange"
  164. >
  165. <el-table-column show-overflow-tooltip type="selection" width="55" />
  166. <el-table-column show-overflow-tooltip label="仓库属性" align="center" prop="warehouseProperty"/>
  167. <el-table-column show-overflow-tooltip label="仓库档案名称" align="center" width="200" prop="warehouseCode"/>
  168. <el-table-column show-overflow-tooltip label="收货仓库编码" align="center" prop="code" />
  169. <el-table-column show-overflow-tooltip label="收货仓库名称" align="center" width="150" prop="name"/>
  170. <el-table-column show-overflow-tooltip label="详细地址" align="center" width="150" prop="address"/>
  171. <el-table-column show-overflow-tooltip label="物料分类" align="center" width="150" prop="materialClassifyName" />
  172. <el-table-column show-overflow-tooltip label="联系人" align="center" width="150" prop="contactsName" />
  173. <el-table-column show-overflow-tooltip label="联系人电话" align="center" prop="contactsPhone" />
  174. <el-table-column show-overflow-tooltip label="NC档案ID" align="center" width="150" prop="createTime" />
  175. <el-table-column show-overflow-tooltip label="备注" align="center" width="120" prop="remark" />
  176. <el-table-column show-overflow-tooltip label="创建人" align="center" width="150" prop="createByName" />
  177. <el-table-column show-overflow-tooltip label="创建时间" align="center" width="150" prop="createTime" />
  178. <el-table-column show-overflow-tooltip label="修改人" align="center" width="150" prop="updateByName" />
  179. <el-table-column show-overflow-tooltip label="修改时间" align="center" width="150" prop="updateTime" />
  180. <el-table-column show-overflow-tooltip label="同步状态" align="center" width="150" prop="sendStatus" />
  181. <el-table-column show-overflow-tooltip label="启用" align="center" width="150" prop="status" />
  182. <el-table-column
  183. fixed="right"
  184. label="操作"
  185. align="center"
  186. width="150"
  187. >
  188. <template slot-scope="scope">
  189. <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
  190. <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
  191. <el-button type="text" size="small" @click="deleteids(scope.row)">删除</el-button>
  192. </template>
  193. </el-table-column>
  194. </el-table>
  195. <el-pagination
  196. @size-change="handleSizeChange"
  197. @current-change="handleCurrentChange"
  198. :current-page="1"
  199. :page-sizes="[5, 10, 15, 20]"
  200. :page-size="100"
  201. layout="total, sizes, prev, pager, next, jumper"
  202. :total=total>
  203. </el-pagination>
  204. </el-card>
  205. </div>
  206. <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
  207. <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>
  208. <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>
  209. </div>
  210. </template>
  211. <script>
  212. import Add from './add.vue'
  213. import CollapseTransition from '@/components/MyCollapse/collapse.vue'
  214. import {getAddressList, delAddress} from '@/api/purchase/deliveryAddress.js'
  215. import Refers from '@/components/Refers/refers.vue'
  216. import TreeRefers from '@/components/Refers/treeRefer.vue'
  217. export default {
  218. name: 'deliveryAddress',
  219. dicts: ['sys_warehouse_attribute'],
  220. components: {
  221. Add,
  222. CollapseTransition,
  223. Refers,
  224. TreeRefers
  225. },
  226. data() {
  227. return {
  228. expanded: false,
  229. // 页面配置
  230. isList: true,
  231. // 页面状态
  232. page: '',
  233. // 搜索框参数
  234. queryParams: {
  235. code: '',
  236. name: '',
  237. warehouse: '',
  238. warehouseName: '',
  239. warehouseCode: '',
  240. warehouseProperty: '',
  241. address: '',
  242. contacts: '',
  243. contactsName: '',
  244. contactsPhone: '',
  245. materialClassify: '',
  246. materialClassifyName: '',
  247. status: '',
  248. sendStatus: '',
  249. remark: '',
  250. pageNum: 1,
  251. pageSize: 5
  252. },
  253. options: [{
  254. value: 'Y', label: '是',
  255. }, {
  256. value: 'N', label: '否'
  257. }],
  258. options2: [{
  259. value: 'Y', label: '已同步',
  260. }, {
  261. value: 'N', label: '未同步'
  262. }],
  263. referCondition: {
  264. type: '',
  265. isPage: true,
  266. title: ''
  267. },
  268. houseOptions: [],
  269. classOptions: [],
  270. contactsOptions: [],
  271. tableList: [],
  272. total: 0,
  273. rowDetail: {},
  274. disable: false
  275. }
  276. },
  277. created() {
  278. this.getList(this.queryParams)
  279. },
  280. methods: {
  281. getList(params){
  282. getAddressList(params).then(res => {
  283. if (res.code === 200) {
  284. this.tableList = res.rows
  285. this.total = res.total
  286. }
  287. })
  288. },
  289. searchList() {
  290. this.getList(this.queryParams)
  291. },
  292. resetList() {
  293. this.queryParams = {
  294. code: '',
  295. name: '',
  296. warehouse: '',
  297. warehouseName: '',
  298. warehouseCode: '',
  299. warehouseProperty: '',
  300. address: '',
  301. contacts: '',
  302. contactsName: '',
  303. contactsPhone: '',
  304. materialClassify: '',
  305. materialClassifyName: '',
  306. status: '',
  307. sendStatus: '',
  308. remark: '',
  309. pageNum: 1,
  310. pageSize: 5
  311. }
  312. this.getList(this.queryParams)
  313. },
  314. handleSelectionChange() {},
  315. handleCommand(command) {
  316. alert(command)
  317. },
  318. addAddress() {
  319. this.isList = false
  320. this.page = 'add'
  321. this.disable = false
  322. },
  323. check(row) {
  324. this.isList = false
  325. this.page = 'check'
  326. this.rowDetail = row
  327. this.disable = true
  328. },
  329. edit(row) {
  330. this.isList = false
  331. this.page = 'edit'
  332. this.rowDetail = row
  333. this.disable = false
  334. },
  335. deleteids(row) {
  336. console.log('row', row)
  337. this.$modal.confirm('确认信息').then(() => {
  338. delAddress(row.id).then(res => {
  339. if (res.code === 200) {
  340. this.$modal.msgSuccess("删除成功");
  341. this.getList(this.queryParams)
  342. }
  343. })
  344. }).catch(() => {})
  345. },
  346. handleSizeChange(val) {
  347. console.log(`每页 ${val} 条`);
  348. this.queryParams.pageSize = val
  349. this.getList(this.queryParams)
  350. },
  351. handleCurrentChange(val) {
  352. console.log(`当前页: ${val}`);
  353. this.queryParams.pageNum = val
  354. this.getList(this.queryParams)
  355. },
  356. drop() {
  357. this.expanded = !this.expanded
  358. },
  359. chooseRefer(type, isPage, title) {
  360. this.referCondition.type = type
  361. this.referCondition.isPage = isPage
  362. this.referCondition.title = title
  363. this.$refs.refer.init(this.referCondition)
  364. },
  365. selectionsToInput(selection) {
  366. if (this.referCondition.type == 'WAREHOUSE_PARAM') {
  367. this.houseOptions = selection
  368. // this.queryParams.warehouse = selection[0].id
  369. this.queryParams.warehouseName = selection[0].name
  370. }
  371. if (this.referCondition.type == 'CONTACTS_PARAM') {
  372. this.contactsOptions = selection
  373. // this.queryParams.contacts = selection[0].code
  374. this.queryParams.contactsName = selection[0].name
  375. }
  376. },
  377. chooseTreeRefer(type, isPage, title) {
  378. this.referCondition.type = type
  379. this.referCondition.isPage = isPage
  380. this.referCondition.title = title
  381. this.$refs.tree.init(this.referCondition)
  382. },
  383. selectionsToInput2(selection) {
  384. this.classOptions.push(selection)
  385. // this.queryParams.materialClassify = selection.id
  386. this.queryParams.materialClassifyName = selection.name
  387. },
  388. }
  389. }
  390. </script>
  391. <style lang="scss" scoped>
  392. #deliveryAddressList {
  393. height: calc(100vh - 84px);
  394. padding: 12px;
  395. box-sizing: border-box;
  396. overflow-y: scroll;
  397. }
  398. .btn_grooup {
  399. margin-bottom: 10px;
  400. display: flex;
  401. justify-content: flex-end;
  402. }
  403. .lines {
  404. margin-top: 0;
  405. }
  406. </style>