websiteColumn.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  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.keyword"/>
  10. </div>
  11. </el-col>
  12. <!-- <el-col :span="8">
  13. <div class="searchBox">
  14. <div class="searchTitle">网系名称:</div>
  15. <el-cascader v-model="getApiData.website_column_id" :props="{checkStrictly:true}" :options="website_column_arr" clearable></el-cascader>
  16. </div>
  17. </el-col> -->
  18. </el-row>
  19. </div>
  20. <div class="layerBoxNoBg">
  21. <div>
  22. <el-button type="primary" @click="openWindow">关联导航池</el-button>
  23. </div>
  24. <div>
  25. <el-button @click="clearSearch">重置</el-button>
  26. <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
  27. </div>
  28. </div>
  29. <!--搜索功能 end------------------------------------------------------------>
  30. <!--表格内容 start------------------------------------------------------------>
  31. <div class="layerBox">
  32. <tableTitle :name="tableDivTitle"/>
  33. <el-row>
  34. <template>
  35. <el-table :data="tableData" style="width: 100%">
  36. <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
  37. <el-table-column prop="website_category" label="导航池名称"></el-table-column>
  38. <el-table-column prop="website_name" label="网站名称"></el-table-column>
  39. <el-table-column prop="website_nav" label="导航名称"></el-table-column>
  40. <el-table-column prop="created_at" label="创建时间"></el-table-column>
  41. <el-table-column prop="updated_at" label="修改时间"></el-table-column>
  42. <el-table-column fixed="right" label="操作" width="280" header-align="center">
  43. <template slot-scope="scope">
  44. <div class="listBtnBox">
  45. <!-- <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div> -->
  46. <div class="listEditBtn" @click="editRow(scope.row.id, scope.row.website_name)"><i class="el-icon-edit-outline"></i>编辑</div>
  47. <div class="listMainBtn" @click="manageRow(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>详情</div>
  48. </div>
  49. <!-- <el-button @click.native.prevent="deleteRow(scope.row.id, tableData)" type="text" size="small">移除</el-button>
  50. <el-button @click.native.prevent="editRow(scope.row.id, scope.row.website_name)" type="text" size="small">编辑</el-button>
  51. <el-button @click.native.prevent="manageRow(scope.row.id)" type="text" size="small">详情</el-button> -->
  52. </template>
  53. </el-table-column>
  54. </el-table>
  55. </template>
  56. </el-row>
  57. </div>
  58. <!--分页 start------------------------------------------------------------>
  59. <div class="alignBox">
  60. <el-row>
  61. <el-col :span="24">
  62. <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
  63. </el-col>
  64. </el-row>
  65. </div>
  66. <!--分页 end------------------------------------------------------------>
  67. <!--表格内容 end------------------------------------------------------------>
  68. <!--弹出框 start------------------------------------------------------------>
  69. <el-dialog :title="editId ? '关联导航池' : '编辑关联导航池'" :visible.sync="windowStatus" :close-on-click-modal="false">
  70. <el-form :model="form" ref="form" :rules="formRules" label-position="left">
  71. <div class="formDiv">
  72. <el-form-item label="关联网站名称:" :label-width="formLabelWidth" prop="webSiteName" class="custom-align-right">
  73. <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入网站关键词"
  74. :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
  75. <el-option
  76. v-for="item in webSiteList"
  77. :key="item.value"
  78. :label="item.label"
  79. :value="item.value">
  80. </el-option>
  81. </el-select>
  82. </el-form-item>
  83. <el-form-item label="导航名称:" :label-width="formLabelWidth" prop="navNames" class="custom-align-right">
  84. <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入导航关键词"
  85. :remote-method="getWebsiteList" :loading="navNamesLoading">
  86. <el-option
  87. v-for="item in navList"
  88. :key="item.value"
  89. :label="item.label"
  90. :value="item.value">
  91. </el-option>
  92. </el-select>
  93. </el-form-item>
  94. </div>
  95. </el-form>
  96. <div slot="footer" class="dialog-footer">
  97. <div>
  98. <el-button @click="closeWindow">取 消</el-button>
  99. <el-button type="warning" @click="editToServe" v-if="editBtn==true" :loading="editLoading" :disabled="editLoading">编辑</el-button>
  100. <el-button type="primary" @click="addToServe" v-else>提交</el-button>
  101. </div>
  102. </div>
  103. </el-dialog>
  104. <!--弹出框 end------------------------------------------------------------>
  105. </div>
  106. </template>
  107. <script>
  108. //引入公用样式
  109. import '@/styles/global.less';
  110. //表格标题
  111. import tableTitle from './components/tableTitle';
  112. export default {
  113. components: {
  114. tableTitle,//表格标题
  115. },
  116. data() {
  117. //0.全局操作 start ------------------------------------------------------------>
  118. const validateWebSiteName = (rule,value,callback) => {
  119. if (value.length == 0) {
  120. callback(new Error('该项不能为空!'))
  121. } else {
  122. callback()
  123. }
  124. }
  125. const validateNavNames = (rule,value,callback) => {
  126. if (value.length == 0) {
  127. callback(new Error('该项不能为空!'))
  128. } else {
  129. callback()
  130. }
  131. }
  132. //0.全局操作 end ------------------------------------------------------------>
  133. return {
  134. //1.列表和分页相关 start ------------------------------------------------------------>
  135. tableDivTitle:"网站导航列表",
  136. tableData: [],//列表
  137. allCount:0,//总条数
  138. editId:0,//要修改的网站id
  139. getApiData:{
  140. keyword:"",//网站名称
  141. website_column_id:"",//网系
  142. page:1,//当前是第几页
  143. pageSize:10,//一共多少条
  144. },
  145. website_column_arr:[],//获得的网系
  146. //分页相关 end ------------------------------------------------------------>
  147. //2.弹出框设置 start ------------------------------------------------------------>
  148. //是否显示弹出窗口
  149. windowStatus:false,
  150. formLabelWidth: '120px',
  151. editBtn:false,//当显示编辑按钮的时候,就不显示提交
  152. editLoading:false,//编辑按钮的加载中
  153. //弹出框设置 end ------------------------------------------------------------>
  154. //3.弹出框中的表单设置 start ------------------------------------------------------------>
  155. form: {
  156. webSiteName:"",//关联网站名称
  157. navNames:[]//导航名称
  158. },
  159. webSiteLoading:false,//获取关联网站列表的加载中
  160. webSiteList:[],//获取关联网站列表
  161. navNamesLoading: false, //获取网站导航的加载中
  162. navList:[],//获取的网站导航列表
  163. ordArr:[],//老导航
  164. //3.2 表单验证规则
  165. formRules: {
  166. webSiteName: [{type:'array',required:true,trigger:'change',message:'关联网站不能为空!',validator:validateWebSiteName}],
  167. navNames: [{type:'array',required:true,trigger:'change',message:'导航名称不能为空!',validator:validateNavNames}],
  168. },
  169. //弹出框中的表单设置 end ------------------------------------------------------------>
  170. }
  171. },
  172. methods: {
  173. //1.列表和分页相关 start ------------------------------------------------------------>
  174. //1.1 获取内容
  175. getData(type){
  176. //判断一下网系里面有没有值,如果有只取最后一位
  177. //搜索条件 - 网系和城市id只提交最后一个
  178. if(this.getApiData.website_column_id.length>0){
  179. this.getApiData.website_column_id = this.getApiData.website_column_id[this.getApiData.website_column_id.length - 1];
  180. }
  181. if(type=="search"){
  182. this.getApiData.page = 1;
  183. }
  184. this.$store.dispatch('pool/getWebsiteCategoryList',this.getApiData).then(res=> {
  185. let data = res.data.rows;
  186. //给数据得
  187. for(let item of res.data.rows){
  188. item.website_nav = "";
  189. }
  190. //显示导航名称
  191. data.forEach(item => {
  192. if (item.website_category && item.website_category.length > 0) {
  193. // 如果 website_category 有值,提取 name 并用逗号隔开
  194. const categoryNames = item.website_category.map(category => category.alias);
  195. // 将结果存储在一个新的属性上,去掉两端的方括号
  196. item.website_nav = categoryNames.join(', ');
  197. } else {
  198. // 如果没有值,可以设置为空数组或其他处理
  199. item.website_nav = '';
  200. }
  201. });
  202. //显示导航池名称
  203. data.forEach(item => {
  204. if (item.website_category && item.website_category.length > 0) {
  205. // 如果 website_category 有值,提取 name 并用逗号隔开
  206. const categoryNames = item.website_category.map(category => category.name);
  207. // 将结果存储在一个新的属性上,去掉两端的方括号
  208. item.website_category = categoryNames.join(', ');
  209. } else {
  210. // 如果没有值,可以设置为空数组或其他处理
  211. item.website_category = '';
  212. }
  213. });
  214. console.log(data)
  215. this.tableData = data;//放入数据
  216. this.allCount = res.data.count;//放入总条数
  217. })
  218. },
  219. //1.2 删除内容
  220. deleteRow(id){
  221. this.$confirm('删除后,该条信息及其绑定关系全部删除,确定吗?', '提示', {
  222. confirmButtonText: '确定',
  223. cancelButtonText: '取消',
  224. type: 'warning'
  225. }).then(() => {
  226. //website_id
  227. //category_id
  228. console.log("当前删除:" + id)
  229. this.$store.dispatch('pool/delWebsiteCategory',{category_id:id}).then(res=> {
  230. this.getData();
  231. this.$message({
  232. type: 'success',
  233. message: '删除成功!'
  234. });
  235. }).catch(() => {
  236. this.$message({
  237. type: 'warning',
  238. message: '网络错误,请重试!'
  239. });
  240. })
  241. }).catch(() => {
  242. this.$message({
  243. type: 'warning',
  244. message: '已取消删除'
  245. });
  246. });
  247. },
  248. //1.3 列表内容分页
  249. //直接跳转
  250. handleSizeChange(val) {
  251. this.getApiData.page = val;
  252. this.getData();
  253. },
  254. //1.4 点击分页
  255. handleCurrentChange(val) {
  256. this.getApiData.page = val;
  257. this.getData();
  258. },
  259. //1.5 清理搜索框
  260. clearSearch(){
  261. this.getApiData.keyword = "";
  262. this.getApiData.website_column_id = "";
  263. this.getApiData.page = 1;
  264. this.getApiData.pageSize = 10;
  265. this.getData();
  266. },
  267. //列表和分页相关 end ------------------------------------------------------------>
  268. //2.搜索 start ------------------------------------------------------------>
  269. //2.1 获得所有网系
  270. getwebsiteColumn(){
  271. let that = this;
  272. this.$store.dispatch('pool/getwebsiteColumn').then(res=> {
  273. let arrData = this.transformData(res.data)
  274. this.website_column_arr = arrData;
  275. })
  276. },
  277. //2.2对网系进行格式化
  278. transformData(arrData) {
  279. let that = this;
  280. return arrData.map(item => {
  281. // 创建一个新的对象,替换键名
  282. let newItem = {
  283. label: item.column_name,
  284. value: item.id,
  285. // 保留其他不需要改动的字段
  286. pid: item.pid,
  287. sort: item.sort,
  288. remark: item.remark,
  289. column_arr_id: item.column_arr_id,
  290. updated_at: item.updated_at,
  291. created_at: item.created_at,
  292. };
  293. // 如果有 children,则递归处理 children 数组
  294. if (item.children && item.children.length > 0) {
  295. newItem.children = that.transformData(item.children);
  296. }
  297. return newItem;
  298. });
  299. },
  300. //搜索 end ------------------------------------------------------------>
  301. //3.弹出框设置 start ------------------------------------------------------------>
  302. //3.1 打开弹出框
  303. openWindow() {
  304. this.windowStatus = true;
  305. this.clearToServe();
  306. //显示添加按钮
  307. this.editBtn = false;
  308. },
  309. //2.2 关闭弹出框
  310. closeWindow(){
  311. this.windowStatus = false;
  312. this.clearToServe();
  313. },
  314. //3.3 清理弹出框
  315. clearToServe(){
  316. this.form.webSiteName = "";
  317. this.form.navNames = [];
  318. this.webSiteList = [];
  319. this.navList = [];
  320. this.ordArr = [];
  321. },
  322. //弹出框设置 end ------------------------------------------------------------>
  323. //4.添加网站导航 start ------------------------------------------------------------>
  324. //4.1 获得网站列表
  325. getWebNavList(query){
  326. if (query !== '') {
  327. this.webSiteLoading = true;
  328. let data = {keyword:query}
  329. let dataArr = [];
  330. this.$store.dispatch('pool/getNavWebList',data).then(res=> {
  331. console.log(res.data)
  332. for(let item of res.data){
  333. let data = {};
  334. data.key = item.id;
  335. data.value = item.id;
  336. data.label = item.website_name;
  337. dataArr.push(data)
  338. }
  339. this.webSiteList = dataArr;
  340. this.webSiteLoading = false;
  341. }).catch(() => {
  342. this.$message({
  343. type: 'info',
  344. message: '网络错误,请重试!'
  345. });
  346. })
  347. } else {
  348. this.navList = [];
  349. }
  350. },
  351. //4.2 获得导航列表
  352. getWebsiteList(query){
  353. if (query !== '') {
  354. this.navNamesLoading = true;
  355. let data = {
  356. pid:0,//默认只有第一级
  357. name:query,
  358. }
  359. let dataArr = [];
  360. this.$store.dispatch('pool/categoryList',data).then(res=> {
  361. console.log(res.data)
  362. for(let item of res.data){
  363. let data = {};
  364. data.key = item.category_id;
  365. data.value = item.category_id;
  366. data.label = item.name;
  367. dataArr.push(data)
  368. }
  369. this.navList = dataArr;
  370. this.navNamesLoading = false;
  371. }).catch(() => {
  372. this.$message({
  373. type: 'info',
  374. message: '网络错误,请重试!'
  375. });
  376. })
  377. } else {
  378. this.navList = [];
  379. }
  380. },
  381. //4.3添加导航
  382. addToServe(){
  383. console.log(this.form.webSiteName) //关联网站id
  384. console.log(this.form.navNames) //导航名称
  385. let data = {
  386. website_id:this.form.webSiteName,//只能关联1个网站
  387. category_arr_id:this.form.navNames//可以关联多个导航
  388. }
  389. //console.log(data)
  390. this.$refs.form.validate(valid => {
  391. if (valid) {
  392. this.$store.dispatch('pool/addWebsiteCategory',data).then(res=> {
  393. console.log(res.data)
  394. if(res.code==200){
  395. this.$message({
  396. type: 'success',
  397. message: '添加成功!'
  398. });
  399. //关闭并重置窗口
  400. this.closeWindow();
  401. //重新请求页面
  402. this.getData();
  403. }else{
  404. this.$message({
  405. type: 'info',
  406. message: '添加失败,请重试!'
  407. });
  408. }
  409. }).catch(() => {
  410. this.$message({
  411. type: 'info',
  412. message: '网络错误,请重试!'
  413. });
  414. })
  415. }
  416. })
  417. },
  418. //添加网站导航 end ------------------------------------------------------------>
  419. //5.编辑网站 start ------------------------------------------------------------>
  420. //打开弹出窗口
  421. editRow(id,name){
  422. //清理并且打开弹窗
  423. this.openWindow();
  424. this.getWebsiteCategory(id,name);
  425. //显示编辑按钮
  426. this.editBtn = true;
  427. },
  428. //编辑导航
  429. getWebsiteCategory(id,name){
  430. //把id放到待编辑的id中
  431. this.editId = id;
  432. //查询这个站点下面关联的导航有哪些
  433. let data = {website_id:id}
  434. this.$store.dispatch('pool/getAdminWebsiteCategory',data).then(res=> {
  435. //先回显站点信息
  436. this.form.webSiteName = name;
  437. //把查询出来的导航回显到编辑窗口中
  438. let categories = res.data;
  439. // 将返回的数据处理成 {label:'',value:''} 格式,用于 el-select
  440. this.navList = categories.map(item => {
  441. return {
  442. label: item.name,// 显示的名称
  443. value: item.category_id// 选项的唯一标识符
  444. };
  445. });
  446. //将选中的导航 ID 列表设置到 form.navNames 中
  447. this.form.navNames = categories.map(item => item.category_id);
  448. //把老的导航存起来
  449. if(res.data.length>0){
  450. for(let item of res.data){
  451. this.ordArr.push(item.category_id) //之前拿的是id 现在改为category_id
  452. }
  453. }
  454. }).catch(() => {
  455. this.$message({
  456. type: 'info',
  457. message: '网络错误,请重试!'
  458. });
  459. })
  460. },
  461. //更新网站导航
  462. editToServe() {
  463. this.editLoading = true;
  464. //把老数组和新数组都提交过去
  465. console.log(this.ordArr)
  466. const olddata = this.ordArr.filter(id => !this.form.navNames.includes(id));
  467. this.ordArr = olddata;
  468. console.log("老数组为:"+ olddata)
  469. console.log("新数组为:"+ this.form.navNames)
  470. let data = {
  471. //old_category_arr_id:this.ordArr,
  472. old_category_arr_id:[],
  473. new_category_arr_id:this.form.navNames,
  474. website_id:this.editId
  475. }
  476. console.log(data)
  477. this.$refs.form.validate(valid => {
  478. if (valid) {
  479. this.$store.dispatch('pool/upWebsiteCategory',data).then(res=> {
  480. if(res.code==200){
  481. this.$message({
  482. type: 'success',
  483. message: '导航修改成功!'
  484. });
  485. }
  486. //关闭并重置窗口
  487. this.closeWindow();
  488. //重新请求页面
  489. this.getData();
  490. this.editLoading = false;
  491. }).catch(() => {
  492. this.$message({
  493. type: 'info',
  494. message: '网络错误,请重试!'
  495. });
  496. this.editLoading = false;
  497. })
  498. }
  499. })
  500. },
  501. //编辑网站 end ------------------------------------------------------------>
  502. //6.管理网站 start ------------------------------------------------------------>
  503. manageRow(website_id){
  504. let data = {
  505. website_id:website_id,//网站id
  506. page:1,// 页码
  507. pageSize:10//每页条数
  508. }
  509. //console.log(data)
  510. //跳转到关联页面
  511. this.$router.push({
  512. path: '/editNavigation',
  513. query: data
  514. });
  515. },
  516. //判断是否已经关联了网站
  517. detectionWebSite(value){
  518. let data = {
  519. website_id:value
  520. }
  521. //验证一下是不是存在了关联网站名称
  522. this.$store.dispatch('pool/getAdminWebsiteCategory',data).then(res=> {
  523. if(res.data.length>0){
  524. this.form.webSiteName = "";
  525. this.$message({
  526. type: 'warning',
  527. message: '该网站已经关联了导航,请重新选择!'
  528. });
  529. }
  530. })
  531. }
  532. //编辑网站 end ------------------------------------------------------------>
  533. },
  534. mounted(){
  535. //1.获得初始数据
  536. this.getData();
  537. //2.获取所有网系
  538. this.getwebsiteColumn();
  539. }
  540. }
  541. </script>
  542. <style scoped lang="less">
  543. //表单微调 start------------------------------------------------------------>*/
  544. ::v-deep .custom-form-item > .el-form-item__label {
  545. line-height: 140px !important;
  546. }
  547. ::v-deep .custom-textarea .el-textarea__inner {
  548. resize: none; /* 禁止用拖拽调整大小 */
  549. }
  550. ::v-deep .custom-align-right .el-form-item__label {
  551. text-align: right; /* 设置标签文字右对齐 */
  552. }
  553. .formDiv .el-select {
  554. width: 100%;
  555. }
  556. </style>