addGood.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  1. <template>
  2. <div class="mainBox">
  3. <div class="layerBox">
  4. <tableTitle :name="tableDivTitle" />
  5. <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
  6. <div class="formDiv">
  7. <el-form-item label="发布类型" prop="type_id" class="custom-align-right">
  8. <el-radio-group v-model="form.type_id">
  9. <el-radio :label="1">供应商品</el-radio>
  10. <el-radio :label="2">求购商品</el-radio>
  11. </el-radio-group>
  12. </el-form-item>
  13. <el-form-item label="商品名称:" prop="name" class="custom-align-right">
  14. <template #label>
  15. <span class="askBox" v-if="form.type_id == 1">
  16. 商品名称:
  17. </span>
  18. <span class="askBox" v-if="form.type_id == 2">
  19. 标题:
  20. </span>
  21. </template>
  22. <el-input v-model="form.name" autocomplete="off" placeholder="请输入商品标题"></el-input>
  23. </el-form-item>
  24. <el-form-item label="发布地点:" prop="city_arr_id" class="custom-align-right">
  25. <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="发布地区:" :props="cityData" filterable
  26. clearable></el-cascader>
  27. </el-form-item>
  28. <el-form-item label="网站:" prop="website_id" class="custom-align-right" v-if="userType != 10000">
  29. <el-select v-model="form.website_id" placeholder="请选择网站" filterable clearable>
  30. <el-option v-for="item in websiteOptions" :key="item.value" :label="item.label" :value="item.value">
  31. </el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="导航池名称:" prop="cat_arr_id" class="custom-align-right">
  35. <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData"
  36. filterable clearable></el-cascader>
  37. </el-form-item>
  38. <div v-if="form.type_id == 1">
  39. <el-form-item label="商品单价:" prop="price" class="custom-align-right">
  40. <el-input type="number" v-model="form.price" autocomplete="off" placeholder="请输入商品单价">
  41. <template #suffix>
  42. </template>
  43. </el-input>
  44. </el-form-item>
  45. <el-form-item label="单位:" prop="unit" class="custom-align-right">
  46. <el-input v-model="form.unit" autocomplete="off" placeholder="请输入单位"></el-input>
  47. </el-form-item>
  48. <el-form-item label="最小定量:" prop="min" class="custom-align-right">
  49. <el-input v-model="form.min" autocomplete="off" placeholder="请输入最小定量"></el-input>
  50. </el-form-item>
  51. <el-form-item label="供货总量:" prop="max" class="custom-align-right">
  52. <el-input v-model="form.max" autocomplete="off" placeholder="请输入供货总量"></el-input>
  53. </el-form-item>
  54. <el-form-item label="有效期:" prop="validity" class="custom-align-right">
  55. <el-date-picker v-model="form.validity" type="date" placeholder="选择日期" :disabled="form.islong == 1">
  56. </el-date-picker>
  57. <el-checkbox v-model="form.islong">无期限</el-checkbox>
  58. </el-form-item>
  59. </div>
  60. <div v-if="form.type_id == 2">
  61. <el-form-item label="截止日期:" prop="validity" class="custom-align-right">
  62. <el-date-picker v-model="form.validity" type="date" placeholder="选择日期" :disabled="form.islong == 1">
  63. </el-date-picker>
  64. <el-checkbox v-model="form.islong">无期限</el-checkbox>
  65. </el-form-item>
  66. </div>
  67. <el-form-item label="商品图:" class="custom-align-right" prop="imgurl">
  68. <div class="uploaderBox">
  69. <span v-if="imgurl.length > 0" class="uploaded-images">
  70. <div v-for="(url, index) in imgurl" :key="index" style="display: inline;float: left; width: 150px;;">
  71. <img :src="url" class="avatar" style="float: left; margin-right: 10px;">
  72. <div style="position: relative;
  73. transform: translate(-50%, -50%);
  74. right: -120px;
  75. top: -20px;
  76. background-color: rgba(0, 0, 0, 0.5);
  77. color: white;
  78. border-radius: 50%;
  79. width: 24px;
  80. height: 24px;
  81. display: flex;
  82. align-items: center;
  83. justify-content: center;
  84. cursor: pointer;
  85. z-index: 10;" @click="deleteImage(index)">
  86. <i class="el-icon-delete"></i>
  87. </div>
  88. </div>
  89. </span>
  90. <el-upload class="avatar-uploader1" action="#" :show-file-list="true" :before-upload="beforeAvatarUpload"
  91. style="display: inline;">
  92. <div style="width: 100px; display: inline-block;">
  93. <img src="@/assets/public/upload/noImage.png">
  94. <div>选择图片</div>
  95. </div>
  96. </el-upload>
  97. </div>
  98. </el-form-item>
  99. <div class="imgBox" style="margin-left: 100px ;margin-bottom: 20px; padding-top: -20px;">
  100. 最多可上传5张,每张图片大小不能超过500K,推荐上传图片尺寸
  101. 宽1000像素 高1000像素。(首张显示为商品头图)</div>
  102. <el-form-item label="商品关键词:" prop="keyword" class="custom-align-right">
  103. <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入商品关键词"></el-input>
  104. </el-form-item>
  105. <el-form-item label="商品描述:" prop="description" class="custom-align-right">
  106. <el-input v-model="form.description" maxlength="300" autocomplete="off" placeholder="请输入商品描述"
  107. type="textarea" :rows="10"></el-input>
  108. </el-form-item>
  109. <el-form-item label="详情说明:" prop="description" class="custom-align-right">
  110. <!--这里是富文本-->
  111. <myEditor ref="myEditor" v-model="form.detail"></myEditor>
  112. </el-form-item>
  113. <el-form-item label="浏览量:" prop="hits" class="custom-align-right">
  114. <el-input type="number" v-model="form.hits" autocomplete="off" placeholder="请输入浏览量"></el-input>
  115. </el-form-item>
  116. <el-form-item label="联系人:" prop="contact" class="custom-align-right">
  117. <el-input v-model="form.contact" autocomplete="off" placeholder="请输入联系人"></el-input>
  118. </el-form-item>
  119. <el-form-item label="联系电话:" prop="phone" class="custom-align-right">
  120. <el-input v-model="form.phone" autocomplete="off" placeholder="请输入联系电话"></el-input>
  121. </el-form-item>
  122. <el-form-item label="座机:" prop="landline" class="custom-align-right">
  123. <el-input v-model="form.landline" autocomplete="off" placeholder="请输入座机"></el-input>
  124. </el-form-item>
  125. <el-form-item label="电子邮箱:" prop="email" class="custom-align-right">
  126. <el-input type="email" v-model="form.email" autocomplete="off" placeholder="请输入电子邮件"></el-input>
  127. </el-form-item>
  128. <el-form-item label="邮政编码:" prop="postal" class="custom-align-right">
  129. <el-input type="number" v-model="form.postal" autocomplete="off" placeholder="请输入邮政编码"></el-input>
  130. </el-form-item>
  131. <el-form-item label="详细地址:" prop="address" class="custom-align-right">
  132. <el-input v-model="form.address" autocomplete="off" placeholder="请输入详细地址"></el-input>
  133. </el-form-item>
  134. </div>
  135. </el-form>
  136. </div>
  137. <div class="bottomBtnBox">
  138. <el-button type="info" @click="returnPage">返回</el-button>
  139. <el-button type="primary" @click="editToServe" v-if="editStatus == true">确定</el-button>
  140. <el-button type="primary" @click="addToServe" v-else>发布商品</el-button>
  141. </div>
  142. </div>
  143. </template>
  144. <script>
  145. import { getWebSiteId, getUseType } from '@/utils/auth'
  146. //表格标题
  147. import tableTitle from './components/tableTitle';
  148. //引入公用样式
  149. import '@/styles/global.less';
  150. //格式化时间
  151. import { formatLocalDate } from '@/utils/public';
  152. //引入富文本编辑器
  153. import myEditor from '../../components/edit/myEditor.vue';
  154. export default {
  155. components: {
  156. tableTitle,
  157. myEditor
  158. },
  159. data() {
  160. //0.全局操作 start ------------------------------------------------------------>
  161. //表单验证
  162. const validateNull = (rule, value, callback) => {
  163. console.log(value, '-------------------------------')
  164. if (value == '' || value == undefined || value == null) {
  165. callback(new Error('该项不能为空!'))
  166. } else {
  167. callback()
  168. }
  169. }
  170. const validateEmpty = (rule, value, callback) => {
  171. console.log(value, '-------------------------------')
  172. if (value.length == 0) {
  173. callback(new Error('该项不能为空!'))
  174. } else {
  175. callback()
  176. }
  177. }
  178. const validateArray = (rule, value, callback) => {
  179. if (value.length == 0) {
  180. callback(new Error('该项不能为空!'))
  181. } else {
  182. callback()
  183. }
  184. }
  185. let self = this;
  186. //0.全局操作 end ------------------------------------------------------------>
  187. return {
  188. userType: 0,
  189. websiteOptions: [],
  190. checked: false,
  191. formLabelWidth: '80px',//表单的长度
  192. //1.表单项 start ------------------------------------------------------------>
  193. editStatus: false,
  194. tableDivTitle: "添加商品",
  195. searchCascaderKey: 0, //列表缓存key
  196. // imgurl: ['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg', 'http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],//图片路径
  197. website_id: 2,
  198. //提交表单
  199. form: {
  200. //1.1使用了外链
  201. name: '',//商品标题
  202. type_id: 1,//布类型:1:供应,2求购
  203. city_arr_id: [],//行政区划
  204. city_id: '',//城市id
  205. cat_arr_id: '',//导航池名称
  206. website_id: 2,
  207. catid: "",
  208. cat_arr_id: "",
  209. name: "",
  210. price: "",
  211. unit: "",
  212. min: null,
  213. max: null,
  214. islong: 0,
  215. validity: "",
  216. keyword: "",
  217. description: "",
  218. detail: "",
  219. hits: null,
  220. contact: '',
  221. phone: '',
  222. landline: '',
  223. email: '',
  224. postal: '',
  225. address: '',
  226. city_id: '',
  227. imgurl: [],//缩略图
  228. },
  229. //1.2 表单验证规则
  230. formRules: {
  231. type_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  232. //商品名称不能为空
  233. name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  234. city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
  235. // 导航池名称不能为空
  236. cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
  237. imgurl: [{ required: true, trigger: 'blur', validator: validateArray }],
  238. website_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  239. price: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  240. unit: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  241. validity: [{ required: true, trigger: 'blur', validator: validateNull }],
  242. description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  243. detail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  244. keyword: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  245. contact: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  246. phone: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  247. address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
  248. },
  249. //1.3富文本编辑器配置
  250. showHtml: false, //用于保存源码内容
  251. editorHtml: '',
  252. cascaderKey: 0,//弹窗用的key
  253. websiteData: {
  254. lazy: true,
  255. checkStrictly: true,
  256. async lazyLoad(node, resolve) {
  257. const { level, data } = node;
  258. if (data && data.children && data.children.length !== 0) {
  259. return resolve(node)
  260. }
  261. console.log(level)
  262. let parentId = level == 0 ? 0 : data.value
  263. let parames = {
  264. 'page': 1,
  265. 'pageSize': 1000,
  266. }
  267. self.$store.dispatch('news/websiteList', parames).then(res => {
  268. if (res.data) {
  269. const nodes = res.data.rows.map(item => ({
  270. value: item.id,
  271. label: item.website_name,
  272. leaf: level >= 3,
  273. children: []
  274. }))
  275. console.log(nodes, 'leaf')
  276. resolve(nodes)
  277. }
  278. })
  279. },
  280. },
  281. cityData: {
  282. checkStrictly: true,
  283. lazy: true,
  284. async lazyLoad(node, resolve) {
  285. const { level, data } = node;
  286. if (data && data.children && data.children.length !== 0) {
  287. return resolve(node)
  288. }
  289. console.log(level, '====level-----')
  290. let parentId = level == 0 ? 0 : data.value
  291. let parames = {
  292. 'pid': parentId
  293. }
  294. self.$store.dispatch('pool/getcityList', parames).then(res => {
  295. if (res.data) {
  296. const nodes = res.data.map(item => ({
  297. value: item.id,
  298. label: item.name,
  299. leaf: level >= 3,
  300. children: []
  301. }))
  302. resolve(nodes)
  303. }
  304. })
  305. }
  306. },
  307. editorOptions: {
  308. placeholder: '请输入内容...',
  309. theme: 'snow', // 主题样式
  310. modules: {
  311. toolbar: {
  312. container: [
  313. [{ 'font': [] }], // 字体
  314. [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
  315. [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  316. ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
  317. [{ 'color': [] }, { 'background': [] }], // 文字颜色、背景颜色
  318. [{ 'script': 'sub' }, { 'script': 'super' }], // 上标、下标
  319. [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
  320. [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
  321. [{ 'align': [] }], // 对齐方式
  322. ['blockquote', 'code-block'], // 引用、代码块
  323. ['link', 'image', 'video'], // 链接、图片、视频
  324. ['clean'],
  325. [{ 'html': true }] // 添加自定义按钮的占位符
  326. ],
  327. handlers: {
  328. image: () => {
  329. this.handleImageClick();
  330. },
  331. showHtml: function () {
  332. this.$emit('toggleSourceMode');
  333. }
  334. }
  335. },
  336. imageResize: {
  337. displayStyles: {
  338. backgroundColor: 'black',
  339. border: 'none',
  340. color: 'white'
  341. },
  342. modules: ['Resize', 'DisplaySize', 'Toolbar'] // 启用不同的调整方式
  343. }
  344. }
  345. },
  346. //1.4图片上传
  347. // imgurl: ['http://192.168.1.127:9501/image/20250227/1740674706184955.jpg', 'http://192.168.1.127:9501/image/20250227/1740674706184955.jpg'],
  348. imgurl: [],
  349. //获取父级导航池
  350. parentKey: 0,//获取父级导航
  351. parentData: {
  352. checkStrictly: true,
  353. lazy: true,
  354. async lazyLoad(node, resolve) {
  355. console.log(resolve, 'node')
  356. const { level, data } = node;
  357. if (data && data.children && data.children.length !== 0) {
  358. return resolve(node)
  359. }
  360. console.log(level, 'level--1--');
  361. let pid = level == 0 ? 0 : data.value
  362. let website_id = self.form.website_id == '' ? 2 : self.form.website_id;
  363. console.log(website_id, 'website_id--111-----');
  364. let parames = {
  365. 'website_id': website_id,
  366. 'pid': pid
  367. }
  368. self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
  369. if (res.data) {
  370. const nodes = res.data.map(item => ({
  371. value: item.category_id,
  372. label: item.name,
  373. leaf: level >= 3,
  374. children: []
  375. }))
  376. resolve(nodes)
  377. } else {
  378. //输出报错原因
  379. console.log(res.msg, 'getWebsiteNavList--1--');
  380. }
  381. })
  382. }
  383. },
  384. inputList: [
  385. { value: '' }
  386. ]
  387. //表单项 end ------------------------------------------------------------>
  388. };
  389. },
  390. watch: {
  391. '$route'(to, from) {
  392. console.log(from, '---------------------------------------');
  393. // 监听路由参数中的 id 变化,若变化则更新页面状态并获取数据
  394. if (to.query.id) {
  395. this.getMainData();
  396. }
  397. },
  398. // 监听路由参数中的 id 变化,若变化则更新页面状态并获取数据
  399. // '$route.query.id': function (newVal, oldVal) {
  400. // console.log('当前 id:', newVal, '旧的 id:', oldVal);
  401. // if (newVal) {
  402. // this.editStatus = true;
  403. // this.tableDivTitle = "编辑资讯";
  404. // // // 调用方法名保持大小写一致
  405. // this.getMainData();
  406. // } else {
  407. // this.editStatus = false;
  408. // this.tableDivTitle = "添加资讯";
  409. // }
  410. // }
  411. },
  412. methods: {
  413. async fetchWebsiteOptions() {
  414. try {
  415. const response = await this.$store.dispatch('news/websiteList', { page: 1, pageSize: 1000 });
  416. if (response && response.data) {
  417. this.websiteOptions = response.data.rows.map(item => ({
  418. value: item.id,
  419. label: item.website_name,
  420. }));
  421. }
  422. } catch (error) {
  423. console.error('获取网站列表失败:', error);
  424. }
  425. },
  426. //获取用户身份信息
  427. getUserInfo() {
  428. this.$store.dispatch('public/getInfo').then(res => {
  429. console.log(res)
  430. this.userType = res.data.type_id;
  431. if (this.userType == 10000) {
  432. this.form.website_id = getWebSiteId() !== undefined ? getWebSiteId() : 2;;
  433. }
  434. //if(res.data.type_id==10000){}//管理员
  435. //if(res.data.type_id==4){}//调研员
  436. //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
  437. }).catch(() => {
  438. this.$message({
  439. type: 'info',
  440. message: '网络错误,请重试!'
  441. });
  442. })
  443. },
  444. //1.提交表单 start ------------------------------------------------------------>
  445. beforeAvatarUpload(file) {
  446. const isJPG = file.type === 'image/jpeg';
  447. const isPNG = file.type === 'image/png';
  448. const isLt2M = file.size / 1024 / 1024 < 2;
  449. console.log(this.imgurl.length, '-0--------------------------------')
  450. if (this.imgurl.length > 4) {
  451. this.$message.warning('只能上传5张图片');
  452. return false;
  453. }
  454. if (!isJPG && !isPNG) {
  455. this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
  456. return false;
  457. }
  458. if (!isLt2M) {
  459. this.$message.error('上传缩略图大小不能超过 2MB!');
  460. return false;
  461. }
  462. const formData = new FormData();
  463. formData.append('file', file);
  464. this.$store.dispatch('pool/uploadFile', formData).then(res => {
  465. this.imgurl.push(res.data.imgUrl);//显示缩略图
  466. this.form.imgurl.push(res.data.imgUrl);//提供表单地址
  467. console.log(res.data.imgUrl, '00000')
  468. })
  469. // 阻止默认的上传行为
  470. return false;
  471. },
  472. deleteImage(index) { // 删除图片
  473. this.imgurl.splice(index, 1);
  474. },
  475. //1.2 提交表单
  476. addToServe() {
  477. //先进行验证
  478. this.$refs.form.validate(valid => {
  479. console.log(this.form.validity, 'this.form.validity-----------------')
  480. if (this.form.islong == 1 && (this.form.validity == null || this.form.validity == '')) {
  481. this.form.validity = '1970-01-01 00:00:00';
  482. }
  483. console.log(this.form.validity, 'this.form.validity-----------------')
  484. if (valid) {
  485. if (this.form.validity) {
  486. console.log(this.form.validity, 'p0------------------')
  487. this.form.validity = formatLocalDate(this.form.validity);
  488. console.log(this.form.validity, 'p1-3333333333333333333333333')
  489. }
  490. this.form.imgurl = this.imgurl;
  491. if (this.form.islong == 1) {
  492. this.form.validity = null;
  493. }
  494. if (this.form.min == '') {
  495. this.form.min = null;
  496. }
  497. if (this.form.max == '') {
  498. this.form.max = null;
  499. }
  500. if (this.form.hits == '') {
  501. this.form.hits = null;
  502. }
  503. console.log(this.form, '提交的数据')
  504. //判断用户身份
  505. if (this.user_type == 10000) {
  506. console.log("用户身份为管理员,无需审核直接发布!")
  507. this.form.status = 2;
  508. } else {
  509. console.log("用户身份为其他用户,提交到审核!")
  510. this.form.status = 1;
  511. }
  512. this.$store.dispatch('news/addGood', this.form).then(res => {
  513. if (res.code == 200) {
  514. //汇报结果
  515. this.$message({
  516. type: 'success',
  517. message: '已成功添加商品!'
  518. });
  519. this.cleatForm();
  520. //返回列表页
  521. this.returnPage()
  522. } else {
  523. this.$message({
  524. type: 'error',
  525. message: "商品发布失败,请稍后再试!"
  526. });
  527. }
  528. })
  529. }
  530. })
  531. },
  532. formatDate(date) {
  533. if (date instanceof Date) {
  534. return date.toISOString().slice(0, 19).replace('T', ' ');
  535. } else if (typeof date === 'string') {
  536. // 将 ISO 8601 格式的字符串转换为 MySQL 期望的格式
  537. const parsedDate = new Date(date);
  538. return parsedDate.toISOString().slice(0, 19).replace('T', ' ');
  539. } else {
  540. return date;
  541. }
  542. },
  543. //1.3 清理表单
  544. cleatForm() {
  545. },
  546. //提交表单 end ------------------------------------------------------------>
  547. //2.跳转操作 start ------------------------------------------------------------>
  548. returnPage() {
  549. this.$router.push({
  550. path: '/goodList',
  551. });
  552. },
  553. //跳转操作 end ------------------------------------------------------------>
  554. //3.回显操作 ------------------------------------------------------------>
  555. //3.1回显数据
  556. getMainData() {
  557. let data = {
  558. id: this.$route.query.id
  559. };
  560. this.$store.dispatch('news/getGoodInfo', data).then(res => {
  561. console.log(res);
  562. this.form.name = res.data.name;
  563. // 回显导航池
  564. this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
  565. this.form.city_arr_id = Array.isArray(res.data.city_arr_id) ? res.data.city_arr_id : JSON.parse(res.data.city_arr_id);
  566. this.parentKey += 1; // 触发级联选择器重新加载
  567. this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
  568. //回显推荐等级
  569. this.form.imgurl = Array.isArray(res.data.imgurl) ? res.data.imgurl : JSON.parse(res.data.imgurl);
  570. this.imgurl = Array.isArray(res.data.imgurl) ? res.data.imgurl : JSON.parse(res.data.imgurl);
  571. this.form.keyword = res.data.keyword;
  572. this.form.type_id = res.data.type_id;
  573. this.form.website_id = res.data.website_id;
  574. this.form.catid = res.data.catid;
  575. this.form.price = res.data.price;
  576. this.form.unit = res.data.unit;
  577. this.form.min = res.data.min;
  578. this.form.max = res.data.max;
  579. this.form.islong = res.data.islong == 1 ? true : false;
  580. this.form.validity = res.data.validity;
  581. this.form.keyword = res.data.keyword;
  582. this.form.description = res.data.description;
  583. //回显编辑器内容
  584. this.$nextTick(() => {
  585. this.form.detail = res.data.detail;
  586. });
  587. this.form.hits = res.data.hits;
  588. this.form.contact = res.data.contact;
  589. this.form.phone = res.data.phone;
  590. this.form.landline = res.data.landline;
  591. this.form.email = res.data.email;
  592. this.form.postal = res.data.postal;
  593. this.form.address = res.data.address;
  594. })
  595. },
  596. async loadCascaderPath(path) {
  597. for (let i = 0; i < path.length; i++) {
  598. const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
  599. const level = i; // 当前层级的索引
  600. // self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
  601. // if (res.data) {
  602. // const nodes = res.data.map(item => ({
  603. // value: item.category_id,
  604. // label: item.name,
  605. // leaf: level >= 3,
  606. // children: []
  607. // }))
  608. // resolve(nodes)
  609. await this.$store.dispatch('pool/categoryList', { pid: parentId })
  610. .then((res) => {
  611. const nodes = res.data.map(item => ({
  612. value: item.id,
  613. label: item.name,
  614. leaf: level >= 3, // 假设4层结构,设置叶子节点标记
  615. }));
  616. // 级联选择器加载数据
  617. if (level === path.length - 1) {
  618. this.form.cat_arr_id = path; // 确保最后一级路径正确设置
  619. this.parentKey += 1; // 强制刷新 cascader
  620. }
  621. });
  622. }
  623. },
  624. //1.3提交修改
  625. editToServe() {
  626. //提交之前先判断是否为外链
  627. //如果使用了外链,清理掉除了外链以外的内容
  628. console.log(this.form)
  629. //添加要修改的id
  630. this.form.id = this.editId;
  631. //先进行验证
  632. console.log(this.form.validity, 'validity')
  633. if (this.form.islong == 1 && this.form.validity == null) {
  634. this.form.validity = '1970-01-01 00:00:00';
  635. }
  636. this.$refs.form.validate(valid => {
  637. if (valid) {
  638. if (this.form.validity) {
  639. console.log(this.form.validity, 'p0------------------')
  640. this.form.validity = formatLocalDate(this.form.validity);
  641. console.log(this.form.validity, '0------------')
  642. }
  643. if (this.form.islong == 1) {
  644. this.form.validity = null;
  645. }
  646. if (this.form.min == '') {
  647. this.form.min = null;
  648. }
  649. if (this.form.max == '') {
  650. this.form.max = null;
  651. }
  652. if (this.form.hits == '') {
  653. this.form.hits = null;
  654. }
  655. this.form.imgurl = this.imgurl;
  656. //console.log(this.form)
  657. //判断用户身份
  658. if (this.user_type == 10000) {
  659. console.log("用户身份为管理员,无需审核直接发布!")
  660. this.form.status = 2;
  661. } else {
  662. console.log("用户身份为其他用户,提交到审核!")
  663. this.form.status = 1;
  664. }
  665. this.$store.dispatch('news/updateGood', this.form).then(res => {
  666. if (res.code != 200) {
  667. this.$message.error("修改失败,请稍后再试!");
  668. } else {
  669. //汇报结果
  670. this.$message({
  671. type: 'success',
  672. message: '已成功编辑商品!'
  673. });
  674. this.cleatForm();
  675. //返回列表页
  676. this.returnPage()
  677. }
  678. }).catch(() => {
  679. this.$message({
  680. type: 'info',
  681. message: '网络错误,请重试!'
  682. });
  683. })
  684. }
  685. })
  686. },
  687. //跳转操作 end ------------------------------------------------------------>
  688. },
  689. watch: {
  690. 'form.type_id': {
  691. handler(newVal, oldVal) {
  692. if (newVal !== oldVal) {
  693. if (this.$route.query.id != undefined) {
  694. } else {
  695. console.log('-------新增--变化了------------');
  696. this.form.name = '';
  697. this.form.city_arr_id = [];
  698. this.form.city_id = '';
  699. this.form.cat_arr_id = '';
  700. this.form.website_id = '';
  701. this.form.catid = "";
  702. this.form.price = "";
  703. this.form.unit = "";
  704. this.form.min = null;
  705. this.form.max = null;
  706. this.form.islong = 0;
  707. this.form.validity = "";
  708. this.form.keyword = "";
  709. this.form.description = "";
  710. this.form.detail = "";
  711. this.form.hits = null;
  712. this.form.contact = '';
  713. this.form.phone = '';
  714. this.form.landline = '';
  715. this.form.email = '';
  716. this.form.postal = '';
  717. this.form.address = '';
  718. this.form.imgurl = [];
  719. this.form.city_id = '';
  720. }
  721. // 清空特定字段的数据
  722. if (newVal === 1) {
  723. // 从求购商品切换到供应商品
  724. this.form.price = '';
  725. console.log('供应商品');
  726. } else if (newVal === 2) {
  727. // 从供应商品切换到求购商品
  728. console.log('求购商品');
  729. }
  730. }
  731. },
  732. immediate: true // 立即执行一次
  733. },
  734. //监控 website_id
  735. // 若 website_id 发生变化,则清空 cat_arr_id 和 catid
  736. 'form.website_id': {
  737. handler(newVal, oldVal) {
  738. if (newVal !== oldVal) {
  739. this.form.cat_arr_id = [];
  740. this.form.catid = "";
  741. this.parentKey += 1;
  742. }
  743. },
  744. immediate: true // 立即执行一次
  745. }
  746. },
  747. mounted() {
  748. this.user_type = getUseType();
  749. //1.判断是新建还是回显
  750. if (this.$route.query.id != undefined) {
  751. this.editId = this.$route.query.id;
  752. this.editStatus = true;
  753. this.tableDivTitle = "编辑商品";
  754. console.log("编辑商品")
  755. this.getMainData();
  756. } else {
  757. this.editStatus = false;
  758. console.log("添加商品!")
  759. }
  760. this.fetchWebsiteOptions();
  761. this.getUserInfo();
  762. },
  763. };
  764. </script>
  765. <style scoped lang="less">
  766. //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
  767. ::v-deep .custom-form-item>.el-form-item__label {
  768. line-height: 140px !important;
  769. }
  770. ::v-deep .custom-textarea .el-textarea__inner {
  771. resize: none;
  772. /* 禁止用户拖拽调整大小 */
  773. }
  774. ::v-deep .custom-align-right .el-form-item__label {
  775. text-align: right;
  776. /* 设置标签文字右对齐 */
  777. }
  778. ::v-deep .el-select {
  779. width: 100%;
  780. /* 禁止用户拖拽调整大小 */
  781. }
  782. ::v-deep .el-input-group__prepend {
  783. color: black !important;
  784. }
  785. .formLabelFloatBox {
  786. margin-bottom: 10px;
  787. position: relative;
  788. .formLabeladdIcon {
  789. position: absolute;
  790. right: 45px;
  791. top: 5px;
  792. width: 38px;
  793. height: 24px;
  794. }
  795. .formLabelDelIcon {
  796. position: absolute;
  797. right: 5px;
  798. top: 5px;
  799. width: 38px;
  800. height: 24px;
  801. }
  802. }
  803. //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>