edit.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  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. allowClear />
  27. </a-form-model-item>
  28. <a-form-model-item label="产品编码" prop="code">
  29. <a-input
  30. id="productInfoEdit-code"
  31. :maxLength="100"
  32. :disabled="!!$route.params.id"
  33. v-model="form.code"
  34. placeholder="请输入产品编码(最多100个字符)"
  35. allowClear />
  36. </a-form-model-item>
  37. <a-form-model-item label="原厂编码" prop="origCode">
  38. <a-input
  39. id="productInfoEdit-origCode"
  40. :maxLength="200"
  41. :disabled="!!$route.params.id"
  42. v-model="form.origCode"
  43. placeholder="请输入原厂编码(最多200个字符,多个编码用逗号隔开)"
  44. allowClear />
  45. </a-form-model-item>
  46. <a-form-model-item label="基本单位" prop="unit">
  47. <a-input-group compact>
  48. <a-input style="width: 80%" v-model="form.unit" id="productInfoEdit-unit-input" placeholder="请输入基本单位" allowClear/>
  49. <v-select style="width: 20%" code="UNIT" @change="unitChange" id="productInfoEdit-unit" placeholder="快速选择单位"></v-select>
  50. </a-input-group>
  51. </a-form-model-item>
  52. <a-form-model-item label="产品品牌" prop="productBrandSn">
  53. <a-select
  54. show-search
  55. id="productInfoEdit-productBrand"
  56. v-model="form.productBrandSn"
  57. placeholder="请输入名称或拼音查询,如果没有请点击 '+' 新增"
  58. :disabled="!!$route.params.id"
  59. :filter-option="false"
  60. :not-found-content="fetching ? undefined : null"
  61. @search="fetchUser"
  62. @change="handleChange"
  63. style="width: 90%;"
  64. >
  65. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  66. <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn" :disabled="item.enabledFlag==0">{{ item.brandName }}</a-select-option>
  67. </a-select>
  68. <a-button
  69. v-if="$hasPermissions('B_product_dealerProductBrand_add')"
  70. @click="openModal=true"
  71. :disabled="!!$route.params.id"
  72. icon="plus"
  73. size="small"
  74. id="productInfoEdit-add-btn"
  75. style="margin-left: 5px;"></a-button>
  76. </a-form-model-item>
  77. <a-form-model-item label="产品分类" prop="productType">
  78. <a-cascader
  79. :disabled="!!$route.params.id"
  80. @change="changeProductType"
  81. expand-trigger="hover"
  82. :options="productTypeList"
  83. :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
  84. id="productInfoEdit-productType"
  85. placeholder="请选择产品分类"
  86. allowClear
  87. v-model="form.productType" />
  88. </a-form-model-item>
  89. <a-form-model-item label="经销批发价" prop="specialPrice">
  90. <a-input-number
  91. id="productInfoEdit-specialPrice"
  92. v-model="form.specialPrice"
  93. :min="1"
  94. :max="999999"
  95. :precision="2"
  96. style="width: 90%;margin-right: 5px;"
  97. placeholder="请输入经销批发价(1~999999)"
  98. allowClear /><span>元</span>
  99. </a-form-model-item>
  100. <a-form-model-item label="终端价" prop="terminalPrice">
  101. <a-input-number
  102. id="productInfoEdit-terminalPrice"
  103. v-model="form.terminalPrice"
  104. :min="1"
  105. :max="999999"
  106. :precision="2"
  107. style="width: 90%;margin-right: 5px;"
  108. placeholder="请输入终端价(1~999999)"
  109. allowClear /><span>元</span>
  110. </a-form-model-item>
  111. <a-form-model-item label="车主价" prop="carOwnersPrice">
  112. <a-input-number
  113. id="productInfoEdit-carOwnersPrice"
  114. v-model="form.carOwnersPrice"
  115. :min="1"
  116. :max="999999"
  117. :precision="2"
  118. style="width: 90%;margin-right: 5px;"
  119. placeholder="请输入车主价(1~999999)"
  120. allowClear /><span>元</span>
  121. </a-form-model-item>
  122. <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
  123. <a-button type="primary" @click="handleSubmit" size="large" id="productInfoEdit-btn-submit" style="padding: 0 60px;">保存</a-button>
  124. </a-form-model-item>
  125. </a-form-model>
  126. <!-- 新增/编辑产品品牌 -->
  127. <product-brand-edit-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
  128. </a-card>
  129. </a-spin>
  130. </div>
  131. </template>
  132. <script>
  133. import { STable, VSelect } from '@/components'
  134. import productBrandEditModal from '../productBrand/editModal.vue'
  135. import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  136. import { dealerProductTypeList } from '@/api/dealerProductType'
  137. import { dealerProductSave, dealerProductDetail } from '@/api/dealerProduct'
  138. export default {
  139. name: 'ProductInfoEdit',
  140. components: { STable, VSelect, productBrandEditModal },
  141. data () {
  142. return {
  143. spinning: false,
  144. formItemLayout: {
  145. labelCol: { span: 4 },
  146. wrapperCol: { span: 16 }
  147. },
  148. form: {
  149. name: '', // 产品名称
  150. code: '', // 产品编码
  151. origCode: '', // 原厂编码
  152. unit: '', // 基本单位
  153. productBrandSn: undefined, // 产品品牌
  154. productTypeSn3: '', // 产品三级分类
  155. productType: [], // 产品分类
  156. specialPrice: '', // 经销价
  157. terminalPrice: '', // 终端价
  158. carOwnersPrice: '' // 车主价
  159. },
  160. rules: {
  161. name: [
  162. { required: true, message: '请输入产品名称', trigger: 'blur' }
  163. ],
  164. code: [
  165. { required: true, message: '请输入产品编码', trigger: 'blur' }
  166. ],
  167. productBrandSn: [
  168. { required: true, message: '请选择产品品牌', trigger: 'change' }
  169. ],
  170. productType: [
  171. { required: true, message: '请选择产品分类', trigger: 'change' }
  172. ]
  173. },
  174. fetching: false,
  175. productBrandList: [], // 品牌下拉数据
  176. productTypeList: [], // 分类下拉数据
  177. openModal: false // 新增编辑 弹框
  178. }
  179. },
  180. methods: {
  181. // 搜索经销商
  182. fetchUser (value) {
  183. console.log('fetching user', value)
  184. this.fetching = true
  185. dealerProductBrandQuery({ 'sysFlag': '0', 'queryWord': value }).then(res => {
  186. if (res.status == 200) {
  187. this.productBrandList = res.data || []
  188. this.fetching = false
  189. } else {
  190. this.productBrandList = []
  191. this.fetching = false
  192. }
  193. })
  194. },
  195. // 调往对象名称 change
  196. handleChange (value) {
  197. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  198. this.form.targetName = this.dealerData[ind].dealerName
  199. },
  200. filterEmpty () {
  201. let str = this.form.name
  202. str = str.replace(/\ +/g, '')
  203. str = str.replace(/[ ]/g, '')
  204. str = str.replace(/[\r\n]/g, '')
  205. this.form.name = str
  206. },
  207. // 选择单位
  208. unitChange (a, b) {
  209. this.form.unit = b.dispName
  210. },
  211. // 获取产品信息
  212. getGoodsDetail () {
  213. dealerProductDetail({ id: this.$route.params.id }).then(res => {
  214. if (res.status == 200) {
  215. this.form = Object.assign(this.form, res.data)
  216. const productTypeSn1 = res.data.productTypeSn1 ? res.data.productTypeSn1 : ''
  217. const productTypeSn2 = res.data.productTypeSn2 ? res.data.productTypeSn2 : ''
  218. const productTypeSn3 = res.data.productTypeSn3 ? res.data.productTypeSn3 : ''
  219. this.form.productType = [productTypeSn1, productTypeSn2, productTypeSn3]
  220. } else {
  221. this.$refs.ruleForm.resetFields()
  222. }
  223. })
  224. },
  225. // 保存
  226. handleSubmit (e) {
  227. e.preventDefault()
  228. const _this = this
  229. if (!this.form.productTypeSn3) {
  230. this.$message.warning('产品分类未选到第三级,请修改后再提交!')
  231. return
  232. }
  233. this.$refs.ruleForm.validate(valid => {
  234. if (valid) {
  235. const form = JSON.parse(JSON.stringify(_this.form))
  236. form.id = _this.$route.params.id ? _this.$route.params.id : undefined
  237. delete form.productType
  238. _this.spinning = true
  239. dealerProductSave(form).then(res => {
  240. if (res.status == 200) {
  241. _this.$message.success(res.message)
  242. setTimeout(() => {
  243. _this.$router.push({ path: '/productManagement/productInfo/list' })
  244. _this.spinning = false
  245. }, 1000)
  246. } else {
  247. _this.spinning = false
  248. }
  249. })
  250. } else {
  251. console.log('error submit!!')
  252. return false
  253. }
  254. })
  255. },
  256. // 产品分类 change
  257. changeProductType (val, opt) {
  258. this.form.productTypeSn3 = val[2] ? val[2] : ''
  259. },
  260. // 新增品牌 成功
  261. handleOk () {
  262. // 获取品牌数据列表,并赋值
  263. this.getProductBrand('val')
  264. },
  265. filterOption (input, option) {
  266. return (
  267. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  268. )
  269. },
  270. // 返回
  271. handleBack () {
  272. this.$router.push({ path: '/productManagement/productInfo/list' })
  273. },
  274. // 产品品牌 列表
  275. getProductBrand (val) {
  276. dealerProductBrandQuery({ 'sysFlag': '0' }).then(res => {
  277. if (res.status == 200) {
  278. this.productBrandList = res.data
  279. if (val) { // 需将新增加的品牌回填到产品品牌的地方,即不需要用户再选一下
  280. this.form.productBrandSn = this.productBrandList[0].brandSn
  281. this.$refs.ruleForm.clearValidate('productBrandSn')
  282. }
  283. }
  284. })
  285. },
  286. // 产品分类 列表
  287. getProductType () {
  288. dealerProductTypeList({ 'sysFlag': '0' }).then(res => {
  289. if (res.status == 200) {
  290. this.productTypeList = res.data
  291. } else {
  292. this.productTypeList = []
  293. }
  294. })
  295. }
  296. },
  297. mounted () { // 不使用beforeRouteEnter:由于页面路由动态id导致页面表现方式不同但路由相同,则会出现数据不重新请求问题
  298. // this.getProductBrand()
  299. this.getProductType()
  300. this.$refs.ruleForm.resetFields()
  301. if (this.$route.params.id) { // 编辑页
  302. this.getGoodsDetail()
  303. }
  304. }
  305. }
  306. </script>
  307. <style lang="less">
  308. .productInfoEdit-wrap{
  309. .productInfoEdit-back{
  310. margin-bottom: 15px;
  311. }
  312. }
  313. </style>