feat(页面组件添加): 新增左侧为标准选择组件

src/assets/styles/element-variables.scss

@@ -8,11 +8,9 @@ $--color-primary: #1890ff;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
 
 $--button-font-weight: 400;
 
-// $--color-text-regular: #1f2d3d;
 
 $--border-color-light: #dfe4ed;
 $--border-color-lighter: #e6ebf5;

src/assets/styles/process.scss

@@ -16,7 +16,7 @@
 }
 .tab-form {
   .el-form-item {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
   }
 }
 .bottom-btn {

src/components/Page/standard.vue

@@ -6,11 +6,11 @@
     <div class="page-box">
       <el-card class="box-card" shadow="never">
         <template v-if="$slots.tab && $slots.tab.length">
-          <div slot="header" class="clearfix">
+          <!-- <div slot="header" class="clearfix"> -->
             <div class="tabList mb10">
               <slot name="tab"> </slot>
             </div>
-          </div>
+          <!-- </div> -->
         </template>
         <slot> </slot>
       </el-card>
@@ -40,8 +40,6 @@ export default {
   min-height: 80vh;
   // background-color: #000;
 }
-.tabList {
-}
 .header {
   font-size: 16px;
   font-weight: 500;
@@ -53,9 +51,4 @@ export default {
   width: 100%;
   box-shadow: 0 0 4px #cccccc;
 }
-::v-deep {
-  .el-card__header {
-    background-color: #f9f9f9;
-  }
-}
 </style>

src/components/Page/standardOption.vue

+<template>
+  <div class="page-data">
+    <div class="page-box">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <el-card class="box-card" shadow="never">
+            <el-input
+              v-model="queryParams.value"
+              placeholder="输入标准关键词"
+              @keyup.enter="search()"
+            >
+              <i class="el-icon-search el-input__icon" slot="suffix"> </i>
+            </el-input>
+            <ul class="select-list">
+              <li
+                @click="selectStandard(item.value)"
+                v-for="item in standardOption"
+                :class="item.value === standard ? 'selected' : ''"
+              >
+                {{ item.label }}
+              </li>
+            </ul>
+          </el-card>
+        </el-col>
+        <el-col :span="21">
+          <el-card class="box-card" shadow="never">
+            <template v-if="$slots.tab && $slots.tab.length">
+              <!-- <div slot="header" class="clearfix"> -->
+                <div class="tabList mb10">
+                  <slot name="tab"> </slot>
+                <!-- </div> -->
+              </div>
+            </template>
+            <slot> </slot>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+// import request from '@/utils/request'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'standardOption',
+  props: {
+    total: {}
+  },
+  data() {
+    return {
+      queryParams: {
+        value: '',
+        pageNum: 1,
+        pageSize: 99
+      },
+      standardOption: [
+        { label: '标准库选项1', value: '1' },
+        { label: '标准库选项2', value: '2' },
+        { label: '标准库选项3', value: '3' },
+        { label: '标准库选项4', value: '4' },
+        { label: '标准库选项5', value: '5' },
+        { label: '标准库选项6', value: '6' }
+      ]
+    }
+  },
+  created() {},
+  computed: {
+    ...mapGetters(['standard'])
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNum = 1
+      this.loadData()
+    },
+    selectStandard(value) {
+      this.$store.dispatch('standard/setStandard', value)
+    },
+    loadData() {
+      this.loading = true
+      //   request({
+      //     url: this.listUrl,
+      //     method: 'post',
+      //     data: this.queryParams
+      //   })
+      //     .then(res => {
+      //       if (res.code === 200) {
+      //         console.log(res.rows);
+      //         this.tableData = res.rows
+      //         this.total = res.total
+      //       }
+      //       this.loading = false
+      //     })
+      //     .catch(error => {
+      //       if (error.msg) {
+      //         this.$message.error(error.msg)
+      //       }
+      //       this.loading = false
+      //     })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.page-box {
+  padding: 1.5rem 2rem;
+  font-size: 16px;
+}
+.box-card {
+  min-height: 80vh;
+  // background-color: #000;
+}
+.header {
+  font-size: 16px;
+  font-weight: 500;
+}
+.page-title {
+  padding: 15px;
+  // background-color: #f9f9f9;
+  // background-color: #999;
+  width: 100%;
+  box-shadow: 0 0 4px #cccccc;
+}
+
+.select-list {
+  list-style-type: none;
+  padding: 0;
+  li {
+    margin: 1rem 0;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgb(102, 102, 102);
+    width: 100%;
+    overflow: hidden; //超出的文本隐藏
+    text-overflow: ellipsis; //溢出用省略号显示
+    white-space: nowrap; // 默认不换行；
+  }
+  .selected {
+    color: $--color-primary;
+    font-weight: bold;
+  }
+}
+</style>

src/main.js

@@ -4,7 +4,6 @@ import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'
@@ -40,6 +39,8 @@ import ImageUpload from '@/components/ImageUpload'
 import ImagePreview from '@/components/ImagePreview'
 // 页面模板
 import PageStandard from '@/components/Page/standard'
+// 标准库搜索模板
+import PageStandardOption from '@/components/Page/standardOption'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // 头部标签组件
@@ -72,12 +73,13 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('PageStandard', PageStandard)
+Vue.component('PageStandardOption', PageStandardOption)
 Vue.component('TalkItem', TalkItem)
-window.ModelDataSource = require('./utils/ModelDataSource')
-Vue.use(ModelDataSource)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+const ModelDataSource = require('./utils/ModelDataSource')
+Vue.use(ModelDataSource)
 DictData.install()
 
 /**

src/store/getters.js

@@ -16,6 +16,7 @@ const getters = {
   topbarRouters: state => state.permission.topbarRouters,
   defaultRoutes: state => state.permission.defaultRoutes,
   sidebarRouters: state => state.permission.sidebarRouters,
-  companyFiles: state => state.processing.companyFiles
+  companyFiles: state => state.processing.companyFiles,
+  standard: state => state.standard.standard
 }
 export default getters

src/store/index.js

@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import processing from './modules/processing'
+import standard from './modules/standard'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -19,6 +20,7 @@ const store = new Vuex.Store({
     tagsView,
     permission,
     processing,
+    standard,
     settings
   },
   getters

src/store/modules/standard.js

+
+const standard = {
+  namespaced: true,
+  state: {
+    standard: ''
+  },
+
+  mutations: {
+    SET_STANDARD: (state, standard) => {
+      state.standard = standard
+    },
+  },
+
+  actions: {
+    setStandard({ commit }, standard) {
+        commit('SET_STANDARD', standard)
+    }
+  }
+}
+
+export default standard

src/utils/ModelDataSource.js

@@ -2,7 +2,7 @@
  * Model 数据源
  * 用于 单条记录的增删查改
  */
-import request from '@/utils/request'
+
 (function (root, factory) {
   // CommonJS
   if (typeof exports === 'object') {
@@ -14,13 +14,7 @@ import request from '@/utils/request'
   }
 })(this, function () {
   let _ = require('lodash')
-
-  let defaultSettings = {
-    url: '',
-    dataKey: '',
-    defaultAttributes: {}
-  }
-
+  let request = require('@/utils/request')
   function ModelDataSource(vm, settings) {
     this.vm = vm
     this.settings = settings
@@ -30,7 +24,6 @@ import request from '@/utils/request'
     // this.defaultAttributes = settings.attributes;
     this.init()
   }
-
   ModelDataSource.prototype = {
     vm: null,
     settings: null,
@@ -42,7 +35,6 @@ import request from '@/utils/request'
         return ''
       })
     },
-
     /**
      * Fetch
      *

src/views/setting/standardTerms/index.vue

 <template>
-  <page-standard>
+  <page-standard-option>
     <div slot="tab">
-      <!--      <el-radio-group v-model="queryParams.type" @input="loadData">-->
-      <!--        <el-radio-button-->
-      <!--          v-for="dict in dict.type.sys_scene_type"-->
-      <!--          :key="dict.value"-->
-      <!--          :label="dict.value"-->
-      <!--        >-->
-      <!--          {{ dict.label }}-->
-      <!--        </el-radio-button>-->
-      <!--      </el-radio-group>-->
-      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
-        <el-form-item>
-          <el-select
-            v-model="queryParams.ask"
-            clearable
-            style="width: 100%"
-            @change="loadData"
-          >
-            <el-option
-              key="1"
-              value="1"
-              label="汽车整车信息安全技术要求"
-            ></el-option>
-            <el-option key="2" value="2" label="xxxxx软件升级要求"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-            v-model="queryParams.type"
-            clearable
-            style="width: 100%"
-            @change="loadData"
-          >
-            <el-option
-              v-for="dict in dict.type.sys_scene_type"
-              :key="dict.value"
-              :value="dict.value"
-              >{{
-                dict.value === '1'
-                  ? '体系审查'
-                  : dict.value === '2'
-                  ? '车型审查'
-                  : '文档审查'
-              }}</el-option
-            >
-          </el-select>
-        </el-form-item>
-      </el-form>
+      <el-tabs v-model="queryParams.type">
+        <el-tab-pane
+          v-for="(dict, key) in dict.type.sys_scene_type"
+          :key="key"
+          :label="dict.label"
+          :name="dict.value"
+        >
+        </el-tab-pane>
+      </el-tabs>
     </div>
     <el-form
       v-show="showSearch"
@@ -212,11 +174,11 @@
       @pagination="loadData"
     >
     </pagination>
-  </page-standard>
+  </page-standard-option>
 </template>
 <script>
 import page from '@/mixins/page'
-
+import { mapGetters } from 'vuex'
 export default {
   components: {},
   dicts: ['sys_scene_type'],
@@ -237,12 +199,20 @@ export default {
       refreshList: false
     }
   },
+  computed: {
+    ...mapGetters(['standard'])
+  },
   watch: {
     refreshList(val) {
       if (val) {
         this.loadData()
         this.refreshList = false
       }
+    },
+    standard(val) {
+      if (val) {
+        console.log(val)
+      }
     }
   },
   methods: {

vue.config.js

@@ -54,7 +54,15 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        sassOptions: { outputStyle: "expanded" }
+        sassOptions: { outputStyle: "expanded" },
+        additionalData(content, loaderContext) {
+          const { resourcePath, rootContext } = loaderContext
+          const relativePath = path.relative(rootContext, resourcePath)
+          if (relativePath.replace(/\\/g, '/') !== 'src/assets/styles/element-variables.scss') {
+            return `@import "~@/assets/styles/element-variables.scss";${content}`
+          }
+          return content
+        },
       }
     }
   },