categoryList.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743
  1. <template>
  2. <div class="mainBox">
  3. <!--搜索功能 start------------------------------------------------------------>
  4. <div class="layerBox_search">
  5. <el-row>
  6. <el-col :span="8">
  7. <div class="searchBox">
  8. <div class="searchTitle">栏目名称:</div>
  9. <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" />
  10. </div>
  11. </el-col>
  12. <!-- <el-col :span="8">
  13. <div class="searchBox">
  14. <div class="searchTitle">行政职能部门:</div>
  15. <el-cascader :key="searchDepartmentKey" v-model="getApiData.department_id" placeholder="选择栏目所属行政区划" :props="searchDepartmentData" filterable clearable></el-cascader>
  16. </div>
  17. </el-col>
  18. <el-col :span="8">
  19. <div class="searchBox">
  20. <div class="searchTitle">行政区划:</div>
  21. <el-cascader :key="searchCascaderKey" v-model="getApiData.city_id" placeholder="选择栏目所属行政区划" :props="searchCityData" filterable clearable></el-cascader>
  22. </div>
  23. </el-col> -->
  24. </el-row>
  25. </div>
  26. <div class="layerBoxNoBg">
  27. <div>
  28. <el-button type="primary" @click="addCategoryList">添加栏目名称</el-button>
  29. </div>
  30. <div>
  31. <el-button @click="clearSearchList">重置</el-button>
  32. <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
  33. </div>
  34. </div>
  35. <!--搜索功能 end------------------------------------------------------------>
  36. <!--表格内容 start------------------------------------------------------------>
  37. <div class="layerBox">
  38. <tableTitle :name="tableDivTitle" />
  39. <el-row>
  40. <template>
  41. <el-table :data="tableData" style="width: 100%">
  42. <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
  43. <el-table-column prop="name" label="栏目名称"></el-table-column>
  44. <!-- <el-table-column prop="department_name" label="行政职能部门"></el-table-column>
  45. <el-table-column prop="city_name" label="行政区划"></el-table-column> --> 父级栏目
  46. <!-- <el-table-column prop="sort" label="权重"></el-table-column> -->
  47. <el-table-column label="父级栏目">
  48. <template slot-scope="scope">
  49. <div>
  50. {{ scope.row.parent_name ? scope.row.parent_name : "---" }}
  51. </div>
  52. </template>
  53. </el-table-column>
  54. <el-table-column prop="created_at" label="创建时间"></el-table-column>
  55. <el-table-column prop="updated_at" label="修改时间"></el-table-column>
  56. <el-table-column fixed="right" label="操作" width="200" header-align="center">
  57. <template slot-scope="scope">
  58. <div class="listBtnBox">
  59. <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i
  60. class="el-icon-delete"></i>删除</div>
  61. <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i
  62. class="el-icon-edit-outline"></i>编辑</div>
  63. </div>
  64. <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">删除</el-button>
  65. <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. </template>
  70. </el-row>
  71. </div>
  72. <!--分页 start------------------------------------------------------------>
  73. <div class="alignBox">
  74. <el-row>
  75. <el-col :span="24">
  76. <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
  77. @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
  78. :total="allCount"></el-pagination>
  79. </el-col>
  80. </el-row>
  81. </div>
  82. <!--分页 end------------------------------------------------------------>
  83. <!--表格内容 end------------------------------------------------------------>
  84. <!--弹出框 start------------------------------------------------------------>
  85. <el-dialog :title="editId ? '编辑栏目名称' : '添加栏目名称'" :visible.sync="windowStatus" :close-on-click-modal="false"
  86. @close="clearToServe(2)">
  87. <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
  88. <div class="formDiv">
  89. <el-form-item label="栏目名称:" :label-width="formLabelWidth" prop="name" class="custom-align-right">
  90. <el-input v-model="form.name" autocomplete="off" placeholder="请输入栏目名称"></el-input>
  91. <el-checkbox v-model="show_url" @change="ifUrl">引用外链</el-checkbox>
  92. </el-form-item>
  93. <div v-if="show_url == 1">
  94. <el-form-item label="外链地址:" :label-width="formLabelWidth" prop="web_url" class="custom-align-right">
  95. <el-input v-model="form.web_url" autocomplete="off" placeholder="请输入外链地址"></el-input>
  96. </el-form-item>
  97. <el-form-item label="栏目标题:" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
  98. <el-input v-model="form.seo_title" autocomplete="off" placeholder="请输入栏目标题"></el-input>
  99. </el-form-item>
  100. <el-form-item label="栏目关键词:" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
  101. <!-- <el-input v-model="form.seo_keywords" autocomplete="off" placeholder="请输入栏目关键词"></el-input> -->
  102. <inputTag :initialTags="tags" @tags-updated="updateTags" />
  103. </el-form-item>
  104. <el-form-item label="栏目描述:" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
  105. <el-input type="textarea" v-model="form.seo_description" placeholder="请输入栏目描述"></el-input>
  106. </el-form-item>
  107. <!-- <el-form-item label="排序:" :label-width="formLabelWidth" class="custom-align-right">
  108. <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
  109. </el-form-item> -->
  110. </div>
  111. <div v-if="show_url == 0">
  112. <!-- <el-form-item label="关联职能部门:" :label-width="formLabelWidth" prop="department_arr_id" class="custom-align-right"> -->
  113. <!-- <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader> -->
  114. <!-- <el-cascader :key="departmentKey" :props="{value:'id',label:'name',children:'children'}" :options="allDepartment" v-model="form.department_arr_id" :show-all-levels="false" filterable />
  115. </el-form-item> -->
  116. <!-- <el-form-item label="关联行政区划:" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
  117. <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
  118. </el-form-item> -->
  119. <el-form-item label="父级栏目:" :label-width="formLabelWidth" class="custom-align-right">
  120. <el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级栏目" :props="parentData"
  121. filterable clearable></el-cascader>
  122. </el-form-item>
  123. <el-form-item label="栏目标题:" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
  124. <template #label>
  125. <span class="askBox">
  126. 栏目标题:
  127. <el-tooltip class="item" effect="dark" content="栏目标题,如:三农市场网_农资产品商城_网站列表_全国信息一体化网络平台_项目大全。"
  128. placement="top">
  129. <i class="el-icon-question"></i>
  130. </el-tooltip>
  131. </span>
  132. </template>
  133. <el-input v-model="form.seo_title" autocomplete="off" placeholder="请输入栏目标题"></el-input>
  134. </el-form-item>
  135. <el-form-item label="栏目关键词:" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
  136. <template #label>
  137. <span class="askBox">
  138. 栏目关键词:
  139. <el-tooltip class="item" effect="dark" content="栏目关键词,如:三农市场网、农资产品商城、全国三农、信息一体化。" placement="top">
  140. <i class="el-icon-question"></i>
  141. </el-tooltip>
  142. </span>
  143. </template>
  144. <!-- <el-input v-model="form.seo_keywords" autocomplete="off" placeholder="请输入栏目关键词"></el-input> -->
  145. <inputTag :initialTags="tags" @tags-updated="updateTags" />
  146. </el-form-item>
  147. <el-form-item label="栏目描述:" :label-width="formLabelWidth" prop="seo_description" class="custom-align-right">
  148. <template #label>
  149. <span class="askBox">
  150. 栏目描述:
  151. <el-tooltip class="item" effect="dark" content="栏目描述,如:中国三农市场网,农资产品商城属市场类频道,共有5个栏目。" placement="top">
  152. <i class="el-icon-question"></i>
  153. </el-tooltip>
  154. </span>
  155. </template>
  156. <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"
  157. placeholder="请输入栏目描述"></el-input>
  158. </el-form-item>
  159. <!-- <el-form-item label="排序:" :label-width="formLabelWidth" class="custom-align-right">
  160. <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
  161. </el-form-item> -->
  162. </div>
  163. </div>
  164. </el-form>
  165. <div slot="footer" class="dialog-footer">
  166. <el-button @click="closeWindow">取 消</el-button>
  167. <el-button type="primary" @click="editToServe" v-if="editBtn == true">确定</el-button>
  168. <el-button type="primary" @click="addToServe" v-else>提交</el-button>
  169. </div>
  170. </el-dialog>
  171. <!--弹出框 end------------------------------------------------------------>
  172. </div>
  173. </template>
  174. <script>
  175. //表格标题
  176. import tableTitle from './components/tableTitle';
  177. import InputTag from '@/components/InputTag';
  178. //引入公用样式
  179. import '@/styles/global.less';
  180. export default {
  181. components: {
  182. tableTitle,//表格标题
  183. InputTag
  184. },
  185. data() {
  186. //0.全局操作 start ------------------------------------------------------------>
  187. //表单验证
  188. const validateEmpty = (rule, value, callback) => {
  189. if (value.length == 0) {
  190. callback(new Error('该项不能为空!'))
  191. } else {
  192. callback()
  193. }
  194. }
  195. // const validateDepartment = (rule,value,callback) => {
  196. // if (value.length === 0) {
  197. // callback(new Error('请选择职能部门!'))
  198. // } else {
  199. // callback()
  200. // }
  201. // }
  202. // const validateCity = (rule,value,callback) => {
  203. // if (value.length === 0) {
  204. // callback(new Error('请选择行政区划!'))
  205. // } else {
  206. // callback()
  207. // }
  208. // }
  209. const validatePid = (rule, value, callback) => {
  210. if (value.length === 0) {
  211. callback(new Error('请选择父级栏目!'))
  212. } else {
  213. callback()
  214. }
  215. }
  216. let self = this;
  217. //0.全局操作 end ------------------------------------------------------------>
  218. return {
  219. tags: [],
  220. //1.列表和分页相关 start ------------------------------------------------------------>
  221. tableDivTitle: "栏目名称列表",
  222. tableData: [],//内容
  223. allCount: 0,//总条数
  224. editId: 0,//要修改的网站id
  225. getApiData: {
  226. name: "",//栏目池名称查询
  227. // department_id:[],//行政职能部门id
  228. // city_id:[],//行政区划
  229. page: 1,//当前是第几页
  230. pageSize: 10,//一共多少条
  231. },
  232. allDepartment: [],//所有职能
  233. //列表和分页相关 end ------------------------------------------------------------>
  234. //2.搜索相关 start ------------------------------------------------------------>
  235. //行政职能部门
  236. searchDepartmentKey: 0, //列表缓存key
  237. // searchDepartmentData: {
  238. // checkStrictly: true,
  239. // lazy: true,
  240. // async lazyLoad (node, resolve) {
  241. // const { level, data } = node;
  242. // if (data && data.children && data.children.length !== 0) {
  243. // return resolve(node)
  244. // }
  245. // console.log(level)
  246. // let parentId = level == 0 ? 0 : data.value
  247. // let parames = {
  248. // 'pid':parentId
  249. // }
  250. // self.$store.dispatch('pool/getDepartment',parames).then(res=> {
  251. // if (res.data) {
  252. // const nodes = res.data.map(item => ({
  253. // value: item.id,
  254. // label: item.name,
  255. // leaf: level >= 3,
  256. // children: []
  257. // }))
  258. // resolve(nodes)
  259. // }
  260. // })
  261. // }
  262. // },
  263. //获取城市列表
  264. searchCascaderKey: 0, //列表缓存key
  265. searchCityData: {
  266. checkStrictly: true,
  267. lazy: true,
  268. async lazyLoad(node, resolve) {
  269. const { level, data } = node;
  270. if (data && data.children && data.children.length !== 0) {
  271. return resolve(node)
  272. }
  273. console.log(level)
  274. let parentId = level == 0 ? 0 : data.value
  275. let parames = {
  276. 'pid': parentId
  277. }
  278. self.$store.dispatch('pool/getcityList', parames).then(res => {
  279. if (res.data) {
  280. const nodes = res.data.map(item => ({
  281. value: item.id,
  282. label: item.name,
  283. leaf: level >= 3,
  284. children: []
  285. }))
  286. resolve(nodes)
  287. }
  288. })
  289. }
  290. },
  291. //搜索相关 end ------------------------------------------------------------>
  292. //3.弹出框设置 start ------------------------------------------------------------>
  293. windowStatus: false, //显示弹出框
  294. formLabelWidth: '140px',
  295. show_url: false, //是否显示外链输入框
  296. editBtn: false,//当显示编辑按钮的时候,就不显示提交
  297. //弹出框设置 end ------------------------------------------------------------>
  298. //4.弹出框中的表单设置 start ------------------------------------------------------------>
  299. //4.1表单收集的数据
  300. form: {
  301. name: '',//栏目池名称
  302. is_url: 0,//是否为外链,0=否 1=是
  303. web_url: "",//外链地址
  304. // department_arr_id:[],//职能部门
  305. // city_arr_id:[],//行政区划
  306. sort: 0,//排序
  307. //pid:2,
  308. seo_title: "",//标题
  309. seo_keywords: "",//关键词
  310. seo_description: "",//描述
  311. pid_arr: []//父级栏目
  312. },
  313. //4.2表单验证规则
  314. formRules: {
  315. //网站名称不能为空
  316. name: [{ required: true, trigger: 'blur', validator: validateEmpty }],//栏目池名称不能为空
  317. web_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],//外链地址不能为空
  318. // department_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择职能部门!',validator:validateDepartment}],
  319. // city_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择行政区划!',validator:validateCity}],
  320. // pid_arr: [{type:'array',required:true,trigger:'change',message:'请选择父级栏目!',validator:validatePid}],
  321. seo_title: [{ required: true, trigger: 'blur', validator: validateEmpty }],//标题不能为空
  322. seo_keywords: [{ required: true, trigger: 'blur', validator: validateEmpty }],//关键词不能为空
  323. seo_description: [{ required: true, trigger: 'blur', validator: validateEmpty }],//描述不能为空
  324. },
  325. //获取城市列表
  326. cascaderKey: 0,//弹窗用的key
  327. cityData: {
  328. checkStrictly: true,
  329. lazy: true,
  330. async lazyLoad(node, resolve) {
  331. const { level, data } = node;
  332. if (data && data.children && data.children.length !== 0) {
  333. return resolve(node)
  334. }
  335. console.log(level)
  336. let parentId = level == 0 ? 0 : data.value
  337. let parames = {
  338. 'pid': parentId
  339. }
  340. self.$store.dispatch('pool/getcityList', parames).then(res => {
  341. if (res.data) {
  342. const nodes = res.data.map(item => ({
  343. value: item.id,
  344. label: item.name,
  345. leaf: level >= 3,
  346. children: []
  347. }))
  348. resolve(nodes)
  349. }
  350. })
  351. }
  352. },
  353. //获取职能部门
  354. departmentKey: 0,//弹窗用的key
  355. // departmentData: {
  356. // checkStrictly: true,//父级不可选
  357. // lazy: true,
  358. // async lazyLoad (node, resolve) {
  359. // const { level, data } = node;
  360. // if (data && data.children && data.children.length !== 0) {
  361. // return resolve(node)
  362. // }
  363. // console.log(level)
  364. // let parentId = level == 0 ? 0 : data.value
  365. // let parames = {
  366. // 'pid':parentId
  367. // }
  368. // self.$store.dispatch('pool/getDepartment',parames).then(res=> {
  369. // if (res.data) {
  370. // const nodes = res.data.map(item => ({
  371. // value: item.id,
  372. // label: item.name,
  373. // leaf: level >= 3,
  374. // children: []
  375. // }))
  376. // resolve(nodes)
  377. // }
  378. // })
  379. // }
  380. // },
  381. parentKey: 0,//获取父级栏目
  382. parentData: {
  383. checkStrictly: true,
  384. lazy: true,
  385. async lazyLoad(node, resolve) {
  386. const { level, data } = node;
  387. if (data && data.children && data.children.length !== 0) {
  388. return resolve(node)
  389. }
  390. console.log(level)
  391. let parentId = level == 0 ? 0 : data.value
  392. let parames = {
  393. 'pid': parentId
  394. }
  395. self.$store.dispatch('pool/categoryList', parames).then(res => {
  396. if (res.data) {
  397. const nodes = res.data.map(item => ({
  398. value: item.id,
  399. label: item.name,
  400. leaf: level >= 3,
  401. children: []
  402. }))
  403. resolve(nodes)
  404. }
  405. })
  406. }
  407. },
  408. //弹出框中的表单设置 end ------------------------------------------------------------>
  409. }
  410. },
  411. methods: {
  412. //1.列表和分页相关 start ------------------------------------------------------------>
  413. //1.1 开始请求列表信息方法
  414. getData(type) {
  415. //搜索条件
  416. // if(this.getApiData.department_id.length>0){
  417. // //网系只提交最后一个
  418. // this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
  419. // }
  420. // if(this.getApiData.city_id.length>0){
  421. // //城市id只提交最后一个
  422. // this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
  423. // }
  424. //如果是搜索,重新加载第一页
  425. if (type == "search") {
  426. this.getApiData.page = 1;
  427. }
  428. this.$store.dispatch('pool/getCategoryList', this.getApiData).then(res => {
  429. this.tableData = res.data.rows; //��与内容
  430. this.allCount = res.data.count; //给与总条数
  431. }).catch(() => {
  432. this.$message({
  433. type: 'warning',
  434. message: '网络错误,请重试!'
  435. });
  436. })
  437. },
  438. //1.2 删除内容
  439. deleteData(id) {
  440. this.$confirm('删除后,该条信息及其绑定关系全部删除,确定吗', '提示', {
  441. confirmButtonText: '确定',
  442. cancelButtonText: '取消',
  443. type: 'warning'
  444. }).then(() => {
  445. console.log("当前删除:" + id)
  446. this.$store.dispatch('pool/delCategory', { id: id }).then(res => {
  447. if (res.code == 200) {
  448. this.$message({
  449. type: 'success',
  450. message: '删除成功!'
  451. });
  452. } else if (res.code == 0) {
  453. this.$message({
  454. type: 'warning',
  455. message: res.message
  456. });
  457. }
  458. this.getData();
  459. }).catch(() => {
  460. this.$message({
  461. type: 'warning',
  462. message: '网络错误,请重试!'
  463. });
  464. })
  465. }).catch(() => {
  466. this.$message({
  467. type: 'warning',
  468. message: '已取消删除'
  469. });
  470. });
  471. },
  472. //1.3 直接跳转
  473. handleSizeChange(val) {
  474. this.getApiData.page = val;
  475. this.getData();
  476. },
  477. //1.4 点击分页
  478. handleCurrentChange(val) {
  479. this.getApiData.page = val;
  480. this.getData();
  481. },
  482. //1.5 重置按钮
  483. clearSearchList() {
  484. this.tableData = [];
  485. this.getApiData.name = "";
  486. // this.getApiData.department_id = [];
  487. // this.getApiData.city_id = [];
  488. this.getApiData.page = 1;
  489. this.getApiData.pageSize = 10;
  490. this.getData();
  491. },
  492. //1.6 获取所有职能
  493. getAllDepartment() {
  494. this.$store.dispatch('cms/getAllDepartment').then(res => {
  495. console.log(res)
  496. this.allDepartment = res.data;
  497. })
  498. },
  499. //列表和分页相关 end ------------------------------------------------------------>
  500. //2.弹出框设置 start ------------------------------------------------------------>
  501. //2.1 打开弹出框
  502. openWindow() {
  503. //this.clearToServe();
  504. this.windowStatus = true;
  505. },
  506. //2.1.1 添加栏目池
  507. addCategoryList() {
  508. this.show_url = false;
  509. // this.form.is_url = 0;
  510. this.editId = 0;
  511. this.editBtn = false;
  512. this.tags = []
  513. this.openWindow();
  514. },
  515. //2.2 关闭弹出框
  516. closeWindow() {
  517. this.windowStatus = false;
  518. this.clearToServe(2);
  519. },
  520. //2.3 清理弹出框
  521. clearToServe(type) {
  522. if (type == 1) { //type1 使用了外部链接
  523. // this.form.department_arr_id = [];
  524. // this.form.city_arr_id = [];
  525. this.form.pid_arr = [];
  526. }
  527. if (type == 2) { //type2 全部清理
  528. this.form.name = "";
  529. this.form.is_url = 0;
  530. this.form.web_url = "";
  531. // this.form.department_arr_id = [];
  532. // this.form.city_arr_id = [];
  533. this.form.sort = 0;
  534. this.form.seo_title = "";
  535. this.form.seo_keywords = "";
  536. this.form.seo_description = "";
  537. this.form.pid_arr = [];
  538. //存在验证的时候再清理
  539. if (this.$refs.form && this.$refs.form.fields.some(field => field.validateState === 'error')) {
  540. this.$refs.form.clearValidate();
  541. }
  542. }
  543. },
  544. //弹出框设置 end ------------------------------------------------------------>
  545. //3.添加栏目池 start ------------------------------------------------------------>
  546. ifUrl(value) {
  547. //console.log(value)
  548. if (value == true) {
  549. this.form.is_url = 1
  550. } else {
  551. this.form.is_url = 0
  552. }
  553. this.$refs.form.clearValidate();
  554. },
  555. addToServe() {
  556. //先判断是否使用了外链
  557. if (this.show_url == true) {
  558. this.clearToServe(1)
  559. }
  560. //判断有没有添加父级栏目
  561. if (this.form.pid_arr.length == 0) {
  562. this.form.pid_arr = [0];
  563. }
  564. this.$refs.form.validate(valid => {
  565. if (valid) {
  566. this.$store.dispatch('pool/addCategory', this.form).then(res => {
  567. //汇报结果
  568. this.$message({
  569. type: 'success',
  570. message: '已成功添加栏目池!'
  571. });
  572. //清空并退出
  573. this.closeWindow();
  574. this.getData();
  575. }).catch(() => {
  576. this.$message({
  577. type: 'warning',
  578. message: '网络错误,请重试!'
  579. });
  580. })
  581. }
  582. })
  583. },
  584. //添加栏目池 end ------------------------------------------------------------>
  585. //编辑栏目池 start ------------------------------------------------------------>
  586. getDataMain(id) {
  587. //先清空窗口
  588. this.clearToServe(2)
  589. //打开输入窗口
  590. this.openWindow();
  591. //添加修改id
  592. this.editId = id;
  593. //获取网站详情
  594. this.$store.dispatch('pool/getCategoryInfo', { id: id }).then(res => {
  595. //清除错误状态
  596. //this.$refs.form.clearValidate();
  597. console.log(res)
  598. //回显栏目池名称
  599. this.form.name = res.data.name;
  600. //回显示是否使用外链
  601. if (res.data.is_url == 1) {
  602. this.show_url = true;
  603. } else if (res.data.is_url == 0 || res.data.is_url == null) {
  604. this.show_url = false;
  605. }
  606. console.log(res.data.is_url)
  607. //回显外链
  608. this.form.web_url = res.data.web_url;
  609. //回显行政区划
  610. // this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
  611. // //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
  612. // this.cascaderKey += 1;
  613. // this.loadCascaderPath(this.form.city_arr_id,"xzqh");
  614. //回显父级栏目
  615. this.form.pid_arr = JSON.parse(res.data.pid_arr);
  616. this.parentKey += 1;
  617. // this.loadCascaderPath(this.form.pid_arr,"fjdh");
  618. //回显职能部门
  619. // this.form.department_arr_id = JSON.parse(res.data.department_arr_id);
  620. // this.departmentKey += 1;
  621. // this.loadCascaderPath(this.form.department_arr_id,"znbm");
  622. //回显栏目池标题,描述,关键词
  623. this.form.seo_title = res.data.seo_title;
  624. this.form.seo_keywords = res.data.seo_keywords;
  625. this.tags = res.data.seo_keywords ? res.data.seo_keywords.split(',') : [];
  626. this.form.seo_description = res.data.seo_description;
  627. //回显排序
  628. this.form.sort = res.data.sort;
  629. })
  630. this.editBtn = true;//显示编辑按钮
  631. },
  632. //回显行政区划
  633. // async loadCascaderPath(path,type) {
  634. // for (let i = 0; i < path.length; i++) {
  635. // const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
  636. // const level = i; // 当前层级的索引
  637. // await this.$store.dispatch('pool/getcityList', { pid: parentId })
  638. // .then((res) => {
  639. // const nodes = res.data.map(item => ({
  640. // value: item.id,
  641. // label: item.name,
  642. // leaf: level >= 3, // 这里假设4层结构,设置叶子节点标记
  643. // }));
  644. // // 将数据传递到 resolve,通知 cascader 这一层的数据加载完毕
  645. // if (level === path.length - 1) {
  646. // if(type=="xzqh"){this.form.city_arr_id = path;}
  647. // if(type=="fjdh"){this.form.pid_arr = path;}
  648. // if(type=="znbm"){this.form.department_arr_id = path;}
  649. // }
  650. // });
  651. // }
  652. // },
  653. //修改表单
  654. editToServe() {
  655. //防止提交[1,1]这种重复的数据
  656. // if (this.form.department_arr_id.length > 1) {
  657. // const lastIndex = this.form.department_arr_id.length - 1;
  658. // if (this.form.department_arr_id[lastIndex] === this.form.department_arr_id[lastIndex - 1]) {
  659. // this.form.department_arr_id.pop(); // Remove the last element if it's the same as the previous one
  660. // }
  661. // }
  662. this.form.id = this.editId;
  663. this.$refs.form.validate(valid => {
  664. if (valid) {
  665. //提交表单
  666. this.$store.dispatch('pool/updateCategory', this.form).then(res => {
  667. //汇报结果
  668. this.$message({
  669. type: 'success',
  670. message: '已成功修改栏目池信息!'
  671. });
  672. //清空并退出
  673. this.closeWindow();
  674. this.getData();
  675. }).catch(() => {
  676. this.$message({
  677. type: 'warning',
  678. message: '网络错误,请重试!'
  679. });
  680. })
  681. }
  682. })
  683. },
  684. //关键词
  685. updateTags(newTags) {
  686. // this.foem.seo_keywords = newTags;
  687. this.tags = newTags;
  688. this.form.seo_keywords = newTags.join(',');
  689. },
  690. //编辑栏目池 end ------------------------------------------------------------>
  691. },
  692. mounted() {
  693. //1.获得初始数据
  694. this.getData();
  695. //2.获取所有网系
  696. //this.getwebsiteColumn();
  697. //本地转换id为文字
  698. //console.log(getLocationNameById("110000"))
  699. this.getAllDepartment();
  700. }
  701. }
  702. </script>
  703. <style scoped lang="less">
  704. //表单微调 start------------------------------------------------------------>*/
  705. ::v-deep .custom-form-item>.el-form-item__label {
  706. line-height: 140px !important;
  707. }
  708. ::v-deep .custom-textarea .el-textarea__inner {
  709. resize: none;
  710. /* 禁止用���拖拽调整大小 */
  711. }
  712. ::v-deep .custom-align-right .el-form-item__label {
  713. text-align: right;
  714. /* 设置标签文字右对齐 */
  715. }
  716. //表单微调 end------------------------------------------------------------>*/</style>