edit.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. <template>
  2. <div class="productInfoEdit-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="productInfoEdit-back">
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="productInfoEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
  8. </template>
  9. </a-page-header>
  10. <a-card size="small" :bordered="false" class="productInfoEdit-table-page-wrapper">
  11. <a-form-model
  12. id="productInfoEdit-form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="formItemLayout.labelCol"
  17. :wrapper-col="formItemLayout.wrapperCol"
  18. >
  19. <a-form-model-item label="产品名称" prop="name">
  20. <a-input
  21. id="productInfoEdit-name"
  22. :maxLength="100"
  23. v-model.trim="form.name"
  24. @change="filterEmpty"
  25. placeholder="请输入产品名称(最多100个字符)"
  26. ref="name"
  27. @keydown.enter.native="nextFocus('name', 'code', $event)"
  28. allowClear />
  29. </a-form-model-item>
  30. <a-form-model-item label="产品编码" prop="code">
  31. <a-input
  32. id="productInfoEdit-code"
  33. :maxLength="100"
  34. :disabled="!!$route.params.id"
  35. v-model="form.code"
  36. placeholder="请输入产品编码(最多100个字符)"
  37. ref="code"
  38. @keydown.enter.native="nextFocus('code', 'origCode', $event)"
  39. allowClear />
  40. </a-form-model-item>
  41. <a-form-model-item label="原厂编码" prop="origCode">
  42. <a-input
  43. id="productInfoEdit-origCode"
  44. :maxLength="200"
  45. :disabled="!!$route.params.id"
  46. v-model="form.origCode"
  47. placeholder="请输入原厂编码(最多200个字符,多个编码用逗号隔开)"
  48. ref="origCode"
  49. @keydown.enter.native="nextFocus('origCode', 'unit', $event)"
  50. allowClear />
  51. </a-form-model-item>
  52. <a-form-model-item label="基本单位" prop="unit">
  53. <a-input-group compact>
  54. <a-input
  55. style="width: 80%"
  56. v-model="form.unit"
  57. id="productInfoEdit-unit-input"
  58. placeholder="请输入基本单位"
  59. ref="unit"
  60. @keydown.enter.native="nextFocus('unit', 'UNIT', $event, 'vSelect')"
  61. allowClear/>
  62. <v-select
  63. style="width: 20%"
  64. code="UNIT"
  65. @change="unitChange"
  66. id="productInfoEdit-unit"
  67. ref="UNIT"
  68. @keydown.enter.native="nextFocus('UNIT', 'productBrandSn', $event)"
  69. placeholder="快速选择单位"></v-select>
  70. </a-input-group>
  71. </a-form-model-item>
  72. <a-form-model-item label="产品品牌" prop="productBrandSn">
  73. <a-select
  74. show-search
  75. id="productInfoEdit-productBrand"
  76. v-model="form.productBrandSn"
  77. placeholder="请输入名称或拼音查询,如果没有请点击 '+' 新增"
  78. :disabled="!!$route.params.id"
  79. :filter-option="false"
  80. :not-found-content="fetching ? undefined : null"
  81. @search="fetchUser"
  82. style="width: 90%;"
  83. ref="productBrandSn"
  84. @keydown.enter.native="nextFocus('productBrandSn', 'productType', $event)"
  85. >
  86. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  87. <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn" :disabled="item.enabledFlag==0">{{ item.brandName }}</a-select-option>
  88. </a-select>
  89. <a-button
  90. v-if="$hasPermissions('B_product_dealerProductBrand_add')"
  91. @click="openModal=true"
  92. :disabled="!!$route.params.id"
  93. icon="plus"
  94. size="small"
  95. id="productInfoEdit-add-btn"
  96. style="margin-left: 5px;"></a-button>
  97. </a-form-model-item>
  98. <a-form-model-item label="产品分类" prop="productType">
  99. <a-cascader
  100. :disabled="!!$route.params.id"
  101. @change="changeProductType"
  102. expand-trigger="hover"
  103. :options="productTypeList"
  104. :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
  105. id="productInfoEdit-productType"
  106. placeholder="请选择产品分类"
  107. allowClear
  108. v-model="form.productType"
  109. ref="productType"
  110. @keydown.enter.native="nextFocus('productType', 'specialPrice', $event)" />
  111. </a-form-model-item>
  112. <a-form-model-item label="经销批发价" prop="specialPrice">
  113. <a-input-number
  114. id="productInfoEdit-specialPrice"
  115. v-model="form.specialPrice"
  116. :min="0"
  117. :max="999999"
  118. :precision="2"
  119. style="width: 90%;margin-right: 5px;"
  120. placeholder="请输入经销批发价(1~999999)"
  121. ref="specialPrice"
  122. @keydown.enter.native="nextFocus('specialPrice', 'terminalPrice', $event)"
  123. allowClear /><span>元</span>
  124. </a-form-model-item>
  125. <a-form-model-item label="终端价" prop="terminalPrice">
  126. <a-input-number
  127. id="productInfoEdit-terminalPrice"
  128. v-model="form.terminalPrice"
  129. :min="0"
  130. :max="999999"
  131. :precision="2"
  132. style="width: 90%;margin-right: 5px;"
  133. placeholder="请输入终端价(1~999999)"
  134. ref="terminalPrice"
  135. @keydown.enter.native="nextFocus('terminalPrice', 'carOwnersPrice', $event)"
  136. allowClear /><span>元</span>
  137. </a-form-model-item>
  138. <a-form-model-item label="车主价" prop="carOwnersPrice">
  139. <a-input-number
  140. id="productInfoEdit-carOwnersPrice"
  141. v-model="form.carOwnersPrice"
  142. :min="0"
  143. :max="999999"
  144. :precision="2"
  145. style="width: 90%;margin-right: 5px;"
  146. placeholder="请输入车主价(1~999999)"
  147. ref="carOwnersPrice"
  148. @keydown.enter.native="nextFocus('carOwnersPrice', '', $event)"
  149. allowClear /><span>元</span>
  150. </a-form-model-item>
  151. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  152. <a-button type="primary" @click="handleSubmit" size="large" id="productInfoEdit-btn-submit" style="padding: 0 60px;">保存</a-button>
  153. </a-form-model-item>
  154. </a-form-model>
  155. <!-- 新增/编辑产品品牌 -->
  156. <product-brand-edit-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
  157. </a-card>
  158. </a-spin>
  159. </div>
  160. </template>
  161. <script>
  162. import { STable, VSelect } from '@/components'
  163. import productBrandEditModal from '../productBrand/editModal.vue'
  164. import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  165. import { dealerProductTypeList } from '@/api/dealerProductType'
  166. import { dealerProductSave, dealerProductDetail } from '@/api/dealerProduct'
  167. export default {
  168. name: 'ProductInfoEdit',
  169. components: { STable, VSelect, productBrandEditModal },
  170. data () {
  171. return {
  172. spinning: false,
  173. formItemLayout: {
  174. labelCol: { span: 4 },
  175. wrapperCol: { span: 16 }
  176. },
  177. form: {
  178. name: '', // 产品名称
  179. code: '', // 产品编码
  180. origCode: '', // 原厂编码
  181. unit: '', // 基本单位
  182. productBrandSn: undefined, // 产品品牌
  183. productTypeSn3: '', // 产品三级分类
  184. productType: [], // 产品分类
  185. specialPrice: '', // 经销价
  186. terminalPrice: '', // 终端价
  187. carOwnersPrice: '' // 车主价
  188. },
  189. rules: {
  190. name: [
  191. { required: true, message: '请输入产品名称', trigger: 'blur' }
  192. ],
  193. code: [
  194. { required: true, message: '请输入产品编码', trigger: 'blur' }
  195. ],
  196. productBrandSn: [
  197. { required: true, message: '请选择产品品牌', trigger: 'change' }
  198. ],
  199. productType: [
  200. { required: true, message: '请选择产品分类', trigger: 'change' }
  201. ]
  202. },
  203. fetching: false,
  204. productBrandList: [], // 品牌下拉数据
  205. productTypeList: [], // 分类下拉数据
  206. openModal: false // 新增编辑 弹框
  207. }
  208. },
  209. methods: {
  210. // 搜索品牌
  211. fetchUser (value) {
  212. console.log('fetching user', value)
  213. this.fetching = true
  214. dealerProductBrandQuery({ 'queryWord': value }).then(res => {
  215. if (res.status == 200) {
  216. this.productBrandList = res.data || []
  217. this.fetching = false
  218. } else {
  219. this.productBrandList = []
  220. this.fetching = false
  221. }
  222. })
  223. },
  224. filterEmpty () {
  225. let str = this.form.name
  226. str = str.replace(/\ +/g, '')
  227. str = str.replace(/[ ]/g, '')
  228. str = str.replace(/[\r\n]/g, '')
  229. this.form.name = str
  230. },
  231. // 选择单位
  232. unitChange (a, b) {
  233. this.form.unit = b.dispName
  234. },
  235. // 获取产品信息
  236. getGoodsDetail () {
  237. dealerProductDetail({ id: this.$route.params.id }).then(res => {
  238. if (res.status == 200) {
  239. this.form = Object.assign(this.form, res.data)
  240. const productTypeSn1 = res.data.productTypeSn1 ? res.data.productTypeSn1 : ''
  241. const productTypeSn2 = res.data.productTypeSn2 ? res.data.productTypeSn2 : ''
  242. const productTypeSn3 = res.data.productTypeSn3 ? res.data.productTypeSn3 : ''
  243. this.form.productType = [productTypeSn1, productTypeSn2, productTypeSn3]
  244. if (res.data.productBrandName) {
  245. this.fetchUser(res.data.productBrandName)
  246. }
  247. } else {
  248. this.$refs.ruleForm.resetFields()
  249. }
  250. })
  251. },
  252. // 保存
  253. handleSubmit (e) {
  254. e.preventDefault()
  255. const _this = this
  256. if (!this.form.productTypeSn3) {
  257. this.$message.warning('产品分类未选到第三级,请修改后再提交!')
  258. return
  259. }
  260. this.$refs.ruleForm.validate(valid => {
  261. if (valid) {
  262. const form = JSON.parse(JSON.stringify(_this.form))
  263. form.id = _this.$route.params.id ? _this.$route.params.id : undefined
  264. delete form.productType
  265. _this.spinning = true
  266. dealerProductSave(form).then(res => {
  267. if (res.status == 200) {
  268. _this.$message.success(res.message)
  269. setTimeout(() => {
  270. _this.$router.push({ path: '/productManagement/productInfo/list', query: { closeLastOldTab: true } })
  271. _this.spinning = false
  272. }, 1000)
  273. } else {
  274. _this.spinning = false
  275. }
  276. })
  277. } else {
  278. console.log('error submit!!')
  279. return false
  280. }
  281. })
  282. },
  283. // 回车键快捷定位表单下一项
  284. nextFocus (nowRef, nextRef, event, isComponent) {
  285. const _this = this
  286. if (_this.$refs[nowRef]) {
  287. _this.$nextTick(() => {
  288. if (_this.$refs[nextRef]) {
  289. event.target.blur()
  290. if (isComponent == 'vSelect') {
  291. _this.$refs[nextRef].$children[0].focus()
  292. } else {
  293. _this.$refs[nextRef].focus()
  294. }
  295. }
  296. })
  297. }
  298. },
  299. // 产品分类 change
  300. changeProductType (val, opt) {
  301. this.form.productTypeSn3 = val[2] ? val[2] : ''
  302. },
  303. // 新增品牌 成功
  304. handleOk () {
  305. // 获取品牌数据列表,并赋值
  306. this.getProductBrand('val')
  307. },
  308. filterOption (input, option) {
  309. return (
  310. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  311. )
  312. },
  313. // 返回
  314. handleBack () {
  315. this.$router.push({ path: '/productManagement/productInfo/list', query: { closeLastOldTab: true } })
  316. },
  317. // 产品品牌 列表
  318. getProductBrand (val) {
  319. dealerProductBrandQuery({}).then(res => {
  320. if (res.status == 200) {
  321. this.productBrandList = res.data
  322. if (val) { // 需将新增加的品牌回填到产品品牌的地方,即不需要用户再选一下
  323. this.form.productBrandSn = this.productBrandList[0].brandSn
  324. this.$refs.ruleForm.clearValidate('productBrandSn')
  325. }
  326. }
  327. })
  328. },
  329. // 产品分类 列表
  330. getProductType () {
  331. dealerProductTypeList({}).then(res => {
  332. if (res.status == 200) {
  333. this.productTypeList = res.data
  334. } else {
  335. this.productTypeList = []
  336. }
  337. })
  338. },
  339. pageInit () {
  340. this.getProductType()
  341. this.$refs.ruleForm.resetFields()
  342. // 默认首项获取焦点
  343. const _this = this
  344. setTimeout(() => {
  345. if (_this.$refs['name']) {
  346. _this.$refs['name'].focus()
  347. }
  348. }, 300)
  349. if (this.$route.params.id) { // 编辑页
  350. this.getGoodsDetail()
  351. }
  352. }
  353. },
  354. mounted () {
  355. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  356. this.pageInit()
  357. }
  358. },
  359. activated () {
  360. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  361. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  362. this.pageInit()
  363. }
  364. },
  365. beforeRouteEnter (to, from, next) {
  366. next(vm => {})
  367. }
  368. }
  369. </script>
  370. <style lang="less">
  371. .productInfoEdit-wrap{
  372. height: 100%;
  373. >.ant-spin-nested-loading{
  374. height: 100%;
  375. .ant-spin-container{
  376. height: 90%;
  377. }
  378. }
  379. .productInfoEdit-table-page-wrapper{
  380. height: 100%;
  381. }
  382. .productInfoEdit-back{
  383. margin-bottom: 10px;
  384. }
  385. }
  386. </style>