頁面優化

layouts/components/index.js

@@ -3,7 +3,7 @@ import Navbar from "./Navbar.vue"
 import Settings from "./Settings/index.vue"
 import Sidebar from "./Sidebar/index.vue"
 import TagsView from "./TagsView/index.vue"
-import SelectFilterable from "./select/selectFilterable.vue"
+import SelectFilterable from "./Select/selectFilterable.vue"
 
 export default {
 

pages/main/index/solution_manage.vue

@@ -7,66 +7,66 @@
         <el-button type="primary" @click="addClassify"><i class="el-icon-plus"></i>新增分类</el-button>
 
         <!--        标签表格数据 start -->
-          <el-table :data="classifyData">
-            <el-table-column
-              prop="name"
-              label="分类名称" >
-            </el-table-column>
-            <el-table-column
-              label="是否显示" width="150">
-              <template slot-scope="scope">
-                <p v-if="scope.row['is_show'] == 1">是</p>
-                <p v-else>否</p>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="sort"
-              label="排序" width="50">
-            </el-table-column>
-            <el-table-column
-              prop="created_at"
-              label="创建时间" >
-            </el-table-column>
-            <el-table-column
-              prop="updated_at"
-              label="更新时间" >
-            </el-table-column>
-            <el-table-column
-              label="关联领域" >
-              <template slot-scope="scope">
-                <el-tag v-for="(item, id) in scope.row['cats']" v-if="id < 8">{{item['name']}}</el-tag>
-                <p>总共有{{scope.row['cats'].length}}个</p>
-              </template>
-            </el-table-column>
+        <el-table :data="classifyData">
+          <el-table-column
+            prop="name"
+            label="分类名称" >
+          </el-table-column>
+          <el-table-column
+            label="是否显示" width="150">
+            <template slot-scope="scope">
+              <p v-if="scope.row['is_show'] == 1">是</p>
+              <p v-else>否</p>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sort"
+            label="排序" width="50">
+          </el-table-column>
+          <el-table-column
+            prop="created_at"
+            label="创建时间" >
+          </el-table-column>
+          <el-table-column
+            prop="updated_at"
+            label="更新时间" >
+          </el-table-column>
+          <el-table-column
+            label="关联领域" >
+            <template slot-scope="scope">
+              <el-tag v-for="(item, id) in scope.row['cats']" v-if="id < 8">{{item['name']}}</el-tag>
+              <p v-if="scope.row['cats']" >总共有{{scope.row['cats'].length}}个</p>
+            </template>
+          </el-table-column>
 
-            <el-table-column
-              label="操作">
-              <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  @click="editClassify(scope.row)"
-                ><i class="el-icon-edit"></i></el-button>
-                <el-button
-                  type="text"
-                  @click="delClassify(scope.row['id'])"
-                ><i class="el-icon-delete"></i></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-pagination
-            class="order-footer"
-            background
-            layout="prev, pager, next"
-            :page-size="20"
-            :total="Number(totals.classify_total)"
-            @current-change="handleCurrentChange"
-          />
+          <el-table-column
+            label="操作">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="editClassify(scope.row)"
+              ><i class="el-icon-edit"></i></el-button>
+              <el-button
+                type="text"
+                @click="delClassify(scope.row['id'])"
+              ><i class="el-icon-delete"></i></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          class="order-footer"
+          background
+          layout="prev, pager, next"
+          :page-size="20"
+          :total="Number(totals.classify_total)"
+          @current-change="handleCurrentChange"
+        />
         <!--        标签表格数据 end -->
         <!--        新增弹出层 start -->
         <el-dialog
           :title="ClassifyTitle"
           :visible.sync="ClassifyDialog"
-          width="30%">
+          width="45%">
           <el-form ref="form" :model="classifyForm" label-width="100px">
             <el-form-item>
               <p slot="label">分类名<span style="color:#ff0000;">*</span></p>
@@ -84,15 +84,56 @@
               <el-input v-model="classifyForm.sorts" placeholder="请输入数字"></el-input>
             </el-form-item>
 
-            <el-form-item label="关联领域">
-              <el-select v-model="classifyForm.cats" remote multiple filterable reserve-keyword placeholder="请选择" style="width: 100%;">
-                <el-option
-                  v-for="item in categoryData"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id">
-                </el-option>
-              </el-select>
+            <el-form-item>
+              <template>
+                <el-row :gutter="24">
+                  <el-col :span="8">
+                    <div class="grid-content bg-purple">领域</div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div class="grid-content bg-purple">别名</div>
+                  </el-col>
+                  <!--           <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
+                </el-row>
+                <template v-for="(item,index) in classifyForm.cats">
+                  <el-row :gutter="24" style="margin-top: 5px">
+                    <el-col :span="8">
+                      <div class="grid-content bg-purple">
+                        <el-select v-model="classifyForm.cats[index].hash_id" placeholder="请选择领域">
+                          <el-option
+                            v-for="item in categoryData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id">
+                          </el-option>
+                        </el-select>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="grid-content bg-purple">
+                        <el-input v-model="classifyForm.cats[index].alias" placeholder="请输入别名"></el-input>
+                      </div>
+                    </el-col>
+                    <el-col :span="8">
+                      <div class="grid-content bg-purple">
+                        <el-button
+                          @click="deleteChannleRow(index)"
+                          type="text"W
+                          size="small" v-if="index != 0">
+                          移除
+                        </el-button>
+                        <el-button
+                          @click="addChannleRow()"
+                          type="text"
+                          size="small">
+                          添加
+                        </el-button>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </template>
+
+              </template>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="classifySub">提交</el-button>
@@ -548,7 +589,7 @@
       id: '',
       name: '',
       sorts: 1,
-      cats: '',
+      cats: [{hash_id:'',name:'',alias:''}],
       is_show: ''
     }
   };
@@ -679,6 +720,12 @@
         }
 
       },
+      deleteChannleRow(index) {
+        this.classifyForm.cats.splice(index, 1);
+      },
+      addChannleRow() {
+        this.classifyForm.cats.push({hash_id:'',name:'',alias:''})
+      },
       handleCurrentChange(val) {
         this.page = val;
         this.getList();
@@ -694,8 +741,10 @@
         let cats = new Array();
         if(row.cats){
           for(let i = 0; i < row.cats.length; i++){
-            cats.push(row.cats[i]['cat_id']);
+            cats.push({hash_id:row.cats[i]['cat_id'],name:row.cats[i]['name'],alias:row.cats[i]['alias']});
           }
+        }else{
+          cats.push({hash_id:'',name:'',alias:''});
         }
         this.ClassifyTitle = '修改顶级分类';
         this.classifyForm = {
@@ -708,20 +757,49 @@
         this.ClassifyDialog = true;
       },
       async classifySub() {
-        if(this.classifyForm.id){
-          let cats = new Array();
-          let cat_data = this.categoryData;
+        if(this.classifyForm.name.length < 1){
+          this.$message({
+            type: "error",
+            message: "名称不能为空!"
+          });
+          return false;
+        }
+
+        if(this.classifyForm.cats.length < 1){
+          this.$message({
+            type: "error",
+            message: "领域不能为空!"
+          });
+          return false;
+        }
+
+        let cats = new Array();
+        let cat_data = this.categoryData;
+        let cats_value = this.classifyForm.cats;
 
-          for(let i = 0; i < cat_data.length; i++){
-            if(this.classifyForm.cats.indexOf(cat_data[i]['id']) > -1){
-              cats.push({'id':cat_data[i]['id'], 'name':cat_data[i]['name']});
+        for(let i = 0; i < cat_data.length; i++){
+          for(let x= 0; x < cats_value.length; x++){
+            if(cat_data[i]['id'] == cats_value[x]['hash_id']){
+              cats.push({'id':cat_data[i]['id'], 'name':cat_data[i]['name'], alias: cats_value[x]['alias']});
+            }
+          }
+        }
+        let temp_cats = new Array();
+        for(let k= 0; k < cats_value.length; k++){
+          for(let j= 0; j < cats.length; j++){
+            if(cats_value[k]['hash_id'] == cats[j]['id']){
+              temp_cats.push(cats[j]);
             }
           }
+        }
+
+        if(this.classifyForm.id){
+
           let data = {
             id: this.classifyForm.id,
             name: this.classifyForm.name,
             sort: this.classifyForm.sorts,
-            cats: JSON.stringify(cats),
+            cats: JSON.stringify(temp_cats),
             is_show: this.classifyForm.is_show?1:0
           }
 
@@ -735,17 +813,11 @@
             this.ClassifyDialog = false;
           }
         }else{
-          let cats = new Array();
-          let cat_data = this.categoryData;
-          for(let i = 0; i < cat_data.length; i++){
-            if(this.classifyForm.cats.indexOf(cat_data[i]['id']) > -1){
-              cats.push({'id':cat_data[i]['id'], 'name':cat_data[i]['name']});
-            }
-          }
+
           let data = {
             name: this.classifyForm.name,
             sort: this.classifyForm.sorts,
-            cats: JSON.stringify(cats),
+            cats: JSON.stringify(temp_cats),
             is_show: this.classifyForm.is_show?1:0
           }
           let classify_res = await this.$post("/api/admin/kaifain/addClassify", data);