edit.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. <template>
  2. <div class="supplierInfoEdit-wrap">
  3. <a-page-header :ghost="false" :backIcon="false" @back="handleBack" class="supplierInfoEdit-cont">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="merchantInfoManagement-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  7. </template>
  8. </a-page-header>
  9. <a-spin :spinning="spinning" tip="Loading...">
  10. <a-form-model
  11. id="supplierInfoEdit-form"
  12. ref="ruleForm"
  13. :model="form"
  14. :rules="rules"
  15. :label-col="formItemLayout.labelCol"
  16. :wrapper-col="formItemLayout.wrapperCol">
  17. <!-- 基础信息 -->
  18. <a-card size="small" :bordered="false" class="supplierInfoEdit-cont">
  19. <a-collapse :activeKey="['1']">
  20. <a-collapse-panel key="1" header="基础信息">
  21. <a-row>
  22. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  23. <a-form-model-item label="供应商名称" prop="supplierName">
  24. <a-input
  25. id="supplierInfoEdit-supplierName"
  26. :maxLength="30"
  27. v-model="form.supplierName"
  28. placeholder="请输入供应商名称(最多30个字符)"
  29. allowClear />
  30. </a-form-model-item>
  31. </a-col>
  32. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  33. <a-form-model-item label="联系人1" prop="contact">
  34. <a-input v-model.trim="form.contact" id="supplierInfoEdit-contact" :maxLength="30" allowClear placeholder="请输入联系人1(最多30个字符)" />
  35. </a-form-model-item>
  36. </a-col>
  37. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  38. <a-form-model-item label="联系手机1" prop="contactMobile">
  39. <a-input v-model.trim="form.contactMobile" id="supplierInfoEdit-contactMobile" :maxLength="11" allowClear placeholder="请输入联系手机1(最多11个字符)" />
  40. </a-form-model-item>
  41. </a-col>
  42. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  43. <a-form-model-item label="联系角色1" prop="contactRole">
  44. <a-input v-model.trim="form.contactRole" id="supplierInfoEdit-contactRole" :maxLength="30" allowClear placeholder="请输入联系角色1(最多30个字符)" />
  45. </a-form-model-item>
  46. </a-col>
  47. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  48. <a-form-model-item label="联系电话" prop="supplierTelephone">
  49. <a-input v-model.trim="form.supplierTelephone" id="supplierInfoEdit-supplierTelephone" :maxLength="13" allowClear placeholder="请输入联系电话" />
  50. </a-form-model-item>
  51. </a-col>
  52. <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
  53. <a-form-model-item label="地址" required style="margin: 0;" :label-col="{span:4}" :wrapper-col="{span:20}">
  54. <a-row :gutter="20">
  55. <!-- 地址 -->
  56. <a-col span="8">
  57. <a-form-model-item prop="provinceSn">
  58. <a-select id="supplierInfoEdit-provinceSn" allowClear @change="getCityList" v-model="form.provinceSn" placeholder="请选择省">
  59. <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + 'a'">{{ item.name }}</a-select-option>
  60. </a-select>
  61. </a-form-model-item>
  62. </a-col>
  63. <a-col span="8">
  64. <a-form-model-item prop="citySn">
  65. <a-select id="supplierInfoEdit-citySn" allowClear @change="getAreaList" v-model="form.citySn" placeholder="请选择市">
  66. <a-select-option v-for="item in addrCityList" :value="item.areaSn" :key="item.areaSn + 'b'">{{ item.name }}</a-select-option>
  67. </a-select>
  68. </a-form-model-item>
  69. </a-col>
  70. <a-col span="8">
  71. <a-form-model-item prop="districtSn">
  72. <a-select id="supplierInfoEdit-districtSn" allowClear @change="areaCharged" v-model="form.districtSn" placeholder="请选择区/县">
  73. <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
  74. </a-select>
  75. </a-form-model-item>
  76. </a-col>
  77. </a-row>
  78. </a-form-model-item>
  79. </a-col>
  80. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  81. <a-form-model-item label="详细地址" prop="address">
  82. <a-input
  83. id="supplierInfoEdit-address"
  84. :maxLength="60"
  85. v-model="form.address"
  86. placeholder="请输入详细地址(最多60个字符)"
  87. allowClear />
  88. </a-form-model-item>
  89. </a-col>
  90. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  91. <a-form-model-item label="生产周期(天)" prop="produceCycle">
  92. <a-input-number
  93. id="supplierInfoEdit-produceCycle"
  94. v-model="form.produceCycle"
  95. :precision="0"
  96. :min="1"
  97. :max="999999"
  98. placeholder="请输入"
  99. style="width: 100%;" />
  100. </a-form-model-item>
  101. </a-col>
  102. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  103. <a-form-model-item label="配送周期(天)" prop="deliveryCycle">
  104. <a-input-number
  105. id="supplierInfoEdit-deliveryCycle"
  106. v-model="form.deliveryCycle"
  107. :precision="0"
  108. :min="1"
  109. :max="999999"
  110. placeholder="请输入"
  111. style="width: 100%;" />
  112. </a-form-model-item>
  113. </a-col>
  114. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  115. <a-form-model-item label="贷款结算周期(天)" prop="settleCycle">
  116. <a-input-number
  117. id="supplierInfoEdit-settleCycle"
  118. v-model="form.settleCycle"
  119. :precision="0"
  120. :min="1"
  121. :max="999999"
  122. placeholder="请输入"
  123. style="width: 100%;" />
  124. </a-form-model-item>
  125. </a-col>
  126. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  127. <a-form-model-item label="是否合作" prop="cooperateFlag">
  128. <a-radio-group
  129. name="radioGroup"
  130. v-model="form.cooperateFlag"
  131. id="supplierInfoEdit-cooperateFlag" >
  132. <a-radio :value="1">是</a-radio>
  133. <a-radio :value="0">否</a-radio>
  134. </a-radio-group>
  135. </a-form-model-item>
  136. </a-col>
  137. </a-row>
  138. </a-collapse-panel>
  139. </a-collapse>
  140. </a-card>
  141. <!-- 扩展信息 -->
  142. <a-card size="small" :bordered="false" class="supplierInfoEdit-cont">
  143. <a-collapse>
  144. <a-collapse-panel key="1" header="扩展信息">
  145. <a-row>
  146. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  147. <a-form-model-item label="经营方式" prop="busniessMode" help="(例:国有企业)">
  148. <a-input
  149. v-model.trim="form.busniessMode"
  150. id="supplierInfoEdit-busniessMode"
  151. :maxLength="30"
  152. allowClear
  153. placeholder="请输入经营方式(最多30个字符)" />
  154. </a-form-model-item>
  155. </a-col>
  156. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  157. <a-form-model-item label="公司规模" prop="busniessScope" help="(例:100-999人)">
  158. <a-input-number
  159. id="supplierInfoEdit-busniessScope"
  160. v-model="form.busniessScope"
  161. :precision="0"
  162. :min="1"
  163. :max="999999"
  164. placeholder="请输入"
  165. style="width: 100%;" />
  166. </a-form-model-item>
  167. </a-col>
  168. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  169. <a-form-model-item label="成立时间" prop="buildDate">
  170. <a-date-picker
  171. style="width:100%"
  172. id="supplierInfoEdit-buildDate"
  173. format="YYYY-MM-DD"
  174. placeholder="请选择日期"
  175. :disabledDate="disabledDate"
  176. allowClear
  177. v-model="form.buildDate"/>
  178. </a-form-model-item>
  179. </a-col>
  180. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  181. <a-form-model-item label="银行账户" prop="tradeAccountName" help="(例:张三)">
  182. <a-input
  183. v-model.trim="form.tradeAccountName"
  184. id="supplierInfoEdit-tradeAccountName"
  185. :maxLength="30"
  186. allowClear
  187. placeholder="请输入银行账户(最多30个字符)" />
  188. </a-form-model-item>
  189. </a-col>
  190. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  191. <a-form-model-item label="开户行" prop="tradeBankName" help="(例:交通银行)">
  192. <a-input
  193. v-model.trim="form.tradeBankName"
  194. id="supplierInfoEdit-tradeBankName"
  195. :maxLength="30"
  196. allowClear
  197. placeholder="请输入开户行(最多30个字符)" />
  198. </a-form-model-item>
  199. </a-col>
  200. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  201. <a-form-model-item label="银行账号" prop="tradeBankAccount" help="(例:1123 5677 1112 22342 1123)">
  202. <a-input
  203. v-model.trim="form.tradeBankAccount"
  204. id="supplierInfoEdit-tradeBankAccount"
  205. :maxLength="30"
  206. allowClear
  207. placeholder="请输入银行账号(最多30个字符)" />
  208. </a-form-model-item>
  209. </a-col>
  210. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  211. <a-form-model-item label="联系人2" prop="contact2">
  212. <a-input v-model.trim="form.contact2" id="supplierInfoEdit-contact2" :maxLength="30" allowClear placeholder="请输入联系人2(最多30个字符)" />
  213. </a-form-model-item>
  214. </a-col>
  215. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  216. <a-form-model-item label="联系手机2" prop="contactMobile2">
  217. <a-input v-model.trim="form.contactMobile2" id="supplierInfoEdit-contactMobile2" :maxLength="11" allowClear placeholder="请输入联系手机2(最多11个字符)" />
  218. </a-form-model-item>
  219. </a-col>
  220. <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  221. <a-form-model-item label="联系角色2" prop="contactRole2">
  222. <a-input v-model.trim="form.contactRole2" id="supplierInfoEdit-contactRole2" :maxLength="30" allowClear placeholder="请输入联系角色2(最多30个字符)" />
  223. </a-form-model-item>
  224. </a-col>
  225. <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
  226. <a-form-model-item label="备注" prop="remark" :label-col="{span:4}" :wrapper-col="{span:20}">
  227. <a-textarea
  228. id="merchantInfoManagementEdit-remark"
  229. :maxLength="300"
  230. v-model="form.remark"
  231. placeholder="请输入备注(最多300字符)"
  232. allowClear />
  233. </a-form-model-item>
  234. </a-col>
  235. </a-row>
  236. </a-collapse-panel>
  237. </a-collapse>
  238. </a-card>
  239. </a-form-model>
  240. <a-affix :offset-bottom="0">
  241. <div style="text-align: center;width: 100%;background-color: #fff;padding: 12px 0;box-shadow: 0 0 20px #dcdee2;">
  242. <a-button
  243. type="primary"
  244. class="button-primary"
  245. id="supplierInfoEdit-submit-btn"
  246. size="large"
  247. @click="handleSubmit"
  248. style="padding: 0 60px;">提交</a-button>
  249. </div>
  250. </a-affix>
  251. </a-spin>
  252. </div>
  253. </template>
  254. <script>
  255. import moment from 'moment'
  256. import { getArea } from '@/api/data'
  257. import { VSelect } from '@/components'
  258. import { supplierDetail, supplierSave } from '@/api/supplier.js'
  259. export default {
  260. components: { VSelect },
  261. data () {
  262. return {
  263. spinning: false,
  264. formItemLayout: {
  265. labelCol: {
  266. span: 8
  267. },
  268. wrapperCol: {
  269. span: 16
  270. }
  271. },
  272. form: {
  273. supplierName: '',
  274. contact: '',
  275. contactMobile: '',
  276. contactRole: '',
  277. supplierTelephone: '',
  278. provinceSn: undefined,
  279. citySn: undefined,
  280. districtSn: undefined,
  281. address: '',
  282. produceCycle: '',
  283. deliveryCycle: '',
  284. settleCycle: '',
  285. cooperateFlag: undefined,
  286. busniessMode: '',
  287. busniessScope: '',
  288. buildDate: '',
  289. tradeAccountName: '',
  290. tradeBankName: '',
  291. tradeBankAccount: '',
  292. contact2: '',
  293. contactMobile2: '',
  294. contactRole2: '',
  295. remark: ''
  296. },
  297. rules: {
  298. supplierName: [
  299. { required: true, message: '请输入供应商名称', trigger: 'change' }
  300. ],
  301. contact: [
  302. { required: true, message: '请输入联系人1', trigger: 'change' }
  303. ],
  304. contactMobile: [
  305. { required: true, message: '请输入联系手机1', trigger: 'change' },
  306. { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' }
  307. ],
  308. provinceSn: [
  309. { required: true, message: '请选择省', trigger: 'change' }
  310. ],
  311. citySn: [
  312. { required: true, message: '请选择市', trigger: 'change' }
  313. ],
  314. districtSn: [
  315. { required: true, message: '请选择区县', trigger: 'change' }
  316. ],
  317. address: [
  318. { required: true, message: '请输入详细地址', trigger: 'change' }
  319. ],
  320. supplierTelephone: [
  321. { pattern: /^[0-9]{11,13}$/, message: '请输入正确的电话号码!' }
  322. ],
  323. contactMobile2: [
  324. { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' }
  325. ],
  326. cooperateFlag: [
  327. { required: true, message: '请选择是否合作', trigger: 'change' }
  328. ]
  329. },
  330. addrProvinceList: [], // 省下拉
  331. addrCityList: [], // 市下拉
  332. addrDistrictList: [], // 区下拉
  333. dateFormat: 'YYYY-MM-DD'
  334. }
  335. },
  336. methods: {
  337. // 不可选日期
  338. disabledDate (date, dateStrings) {
  339. return date && date.valueOf() > Date.now()
  340. },
  341. // 详情编辑
  342. getDetail () {
  343. supplierDetail({ sn: this.$route.params.id }).then(res => {
  344. if (res.status == 200) {
  345. this.form = Object.assign(this.form, res.data)
  346. if (res.data.buildDate) {
  347. this.form.buildDate = moment(res.data.buildDate, 'YYYY-MM-DD')
  348. }
  349. this.form.cooperateFlag = Number(this.form.cooperateFlag)
  350. this.getArea('city', this.form.provinceSn)
  351. this.getArea('district', this.form.citySn)
  352. }
  353. })
  354. },
  355. // 提交
  356. handleSubmit () {
  357. const _this = this
  358. this.$refs.ruleForm.validate(valid => {
  359. if (valid) {
  360. const form = JSON.parse(JSON.stringify(_this.form))
  361. if (form.buildDate) {
  362. form.buildDate = moment(form.buildDate).format('YYYY-MM-DD') + ' 00:00:00'
  363. }
  364. _this.spinning = true
  365. supplierSave(form).then(res => {
  366. if (res.status == 200) {
  367. _this.$message.success(res.message)
  368. _this.handleBack()
  369. _this.spinning = false
  370. } else {
  371. _this.spinning = false
  372. }
  373. })
  374. } else {
  375. return false
  376. }
  377. })
  378. },
  379. // 返回
  380. handleBack () {
  381. this.$router.push({ path: '/supplierManagement/supplierInfo/list', query: { closeLastOldTab: true } })
  382. },
  383. // 获取城市列表
  384. getCityList (val) {
  385. this.addrCityList = []
  386. this.addrDistrictList = []
  387. this.form.citySn = undefined
  388. this.form.districtSn = undefined
  389. this.form.address = ''
  390. if (val) {
  391. this.getArea('city', val)
  392. this.form.provinceName = this.addrProvinceList.find(item => item.areaSn == val).name
  393. } else {
  394. this.form.provinceName = ''
  395. }
  396. },
  397. // 获取区县列表
  398. getAreaList (val) {
  399. this.addrDistrictList = []
  400. this.form.districtSn = undefined
  401. this.form.address = ''
  402. if (val) {
  403. this.getArea('district', val)
  404. this.form.cityName = this.addrCityList.find(item => item.areaSn == val).name
  405. } else {
  406. this.form.cityName = ''
  407. }
  408. },
  409. // 区县变更
  410. areaCharged (val) {
  411. this.form.address = ''
  412. if (val) {
  413. this.form.districtName = this.addrDistrictList.find(item => item.areaSn == val).name
  414. } else {
  415. this.form.districtName = ''
  416. }
  417. },
  418. // 省/市/区
  419. getArea (leve, sn) {
  420. let params
  421. if (leve == 'province') {
  422. params = { type: '2' }
  423. } else {
  424. params = { parentId: sn, type: leve == 'city' ? '3' : '4' }
  425. }
  426. getArea(params).then(res => {
  427. if (res.status == 200) {
  428. if (leve == 'province') {
  429. this.addrProvinceList = res.data || []
  430. } else if (leve == 'city') {
  431. this.addrCityList = res.data || []
  432. } else if (leve == 'district') {
  433. this.addrDistrictList = res.data || []
  434. }
  435. } else {
  436. if (leve == 'province') {
  437. this.addrProvinceList = []
  438. } else if (leve == 'city') {
  439. this.addrCityList = []
  440. } else if (leve == 'district') {
  441. this.addrDistrictList = []
  442. }
  443. }
  444. })
  445. }
  446. },
  447. beforeRouteEnter (to, from, next) {
  448. next(vm => {
  449. vm.getArea('province')
  450. vm.$refs.ruleForm.resetFields()
  451. if (vm.$route.params.id) { // 编辑页
  452. vm.getDetail()
  453. }
  454. })
  455. }
  456. }
  457. </script>
  458. <style lang="less">
  459. .supplierInfoEdit-wrap{
  460. .supplierInfoEdit-cont{
  461. margin-bottom: 10px;
  462. }
  463. .upload{
  464. width: 100%!important;
  465. }
  466. // 文本编辑器 工具栏样式换行
  467. .supplierInfoEdit-editor{
  468. .w-e-toolbar{
  469. flex-wrap: wrap;
  470. z-index: 0;
  471. }
  472. }
  473. }
  474. </style>