样式修改

src/App.vue

@@ -236,9 +236,6 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
         </div>
         <Menu class="r" />
         <div class="userBox">
-          <el-icon style="vertical-align: middle;">
-            <search />
-          </el-icon>
           <el-button
             type="text"
             style="color: #fff"

src/assets/styles/el-override/el-input.less

@@ -14,6 +14,16 @@ body {
       cursor: not-allowed;
     }
 
+    .el-input__inner,.el-input__inner:hover{
+      border-color: fade(@gray-l, 20);
+
+      &::placeholder {
+        text-align: left;
+        color: fade(@gray-l, 20);
+      }
+    }
+
+
     &.is-in-pagination .el-input__inner[type="number"] {
       width: 48px;
     }

src/views/fault/realfault.vue

@@ -98,34 +98,33 @@
             </el-date-picker>
           </div>
         </div>
-        <div class="query-actions" style="margin-left: 10px">
+        <div class="query-actions">
           <button class="btn" @click="list">查询</button>
-          <button class="btn" style="margin-left: 6px" @click="add">
+          <button class="btn" @click="add" style="margin-left: 20px">
             新增
           </button>
-          <el-upload
-            style="display: inline; margin-left: 6px"
-            :show-file-list="false"
-            :on-success="onSuccess"
-            :on-error="onError"
-            :before-upload="beforeUpload"
-            action="http://192.168.1.18:9002/case/upload/file"
-            accept=".xls,.xlsx"
-          >
-            <button class="btn" @click="importFile">
-              {{ btnText }}
-            </button>
-          </el-upload>
-          <button class="btn" style="margin-left: 6px" @click="exportData()">
-            导出
-          </button>
-          <button
-            class="btn"
-            style="margin-left: 6px"
-            @click="downloadTemplate"
-          >
-            下载模板
-          </button>
+          <el-dropdown @command="handleCommand" style="margin-left: 20px">
+            <button class="btn">更多<i class="el-icon-arrow-down"></i></button>
+            <template #dropdown>
+              <el-dropdown-menu class="dropdown-menu">
+                <el-dropdown-item command="import" class="el-dropdown-item font-color">
+                  导入
+                  <el-upload
+                    style="display: inline; margin-left: 6px"
+                    :show-file-list="false"
+                    :popper-append-to-body="false"
+                    :on-success="onSuccess"
+                    :on-error="onError"
+                    :before-upload="beforeUpload"
+                    action="http://192.168.1.18:9002/case/upload/file"
+                    accept=".xls,.xlsx">
+                  </el-upload>
+                </el-dropdown-item>
+                <el-dropdown-item command="export" class="el-dropdown-item font-color">导出</el-dropdown-item>
+                <el-dropdown-item command="templete" class="el-dropdown-item font-color">下载模板</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
     </div>
@@ -166,7 +165,12 @@
         }
       "
     >
-      <Point :data="gzCgdData" :st="st" :markLineData="markLineData" v-if="gzCgd" />
+      <Point
+        :data="gzCgdData"
+        :st="st"
+        :markLineData="markLineData"
+        v-if="gzCgd"
+      />
     </el-dialog>
     <el-dialog
       :title="'故障样本库' + addDialogTitle"
@@ -326,6 +330,7 @@
 import ComTable from "@/components/coms/table/table.vue";
 import Point from "./point.vue";
 import { ElMessageBox } from "element-plus";
+import { ArrowDown } from "@element-plus/icons-vue";
 export default {
   components: {
     ComTable,
@@ -794,6 +799,12 @@ export default {
       return jsonData.map((v) => filterVal.map((j) => v[j]));
     },
 
+    /*更多操作按钮*/
+    handleCommand(str) {
+      if (str == "import") this.importFile();
+      else if (str == "export") this.exportData();
+      else if (str == "template") this.downloadTemplate();
+    },
     exportData() {
       let that = this;
       const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
@@ -948,7 +959,7 @@ export default {
               that.addDialogShow = false;
               that.resetForm();
             }
-          })
+          });
         }
       });
     },
@@ -1013,8 +1024,20 @@ export default {
 .el-select.w {
   width: 100%;
 }
+.dropdown-menu{
+  background: #040c0b;
+  .font-color{
+    color: #fff;
+  }
+}
+.el-dropdown-item:hover{
+   background: linear-gradient(
+        to top,
+        rgba(5, 187, 76, 0.5),
+        rgba(5, 187, 76, 0)
+      );
+} 
 
-// .el-range-editor.w{width: 100%;}
 </style>
 
 <style lang="less">

src/views/know/faultcategory.vue

@@ -2,34 +2,28 @@
   <div>
     <div class="query mg-b-8">
       <div class="query-items">
-        <div class="query-actions">
-          <button
-            class="btn"
-            @click="
-              () => {
-                dialogShow = true;
-                dialogTitle = '新增';
-              }
-            "
-          >
-            新增
-          </button>
+        <div class="query-item">
+          <div class="lable">故障名称：</div>
+          <div class="search-input">
+            <el-input
+              v-model="search"
+              size="small"
+              placeholder="输入故障名称"
+              @input="test"
+            />
+          </div>
         </div>
       </div>
+      <div class="query-actions" style="margin-left: 50px">
+        <button class="btn" @click="insertItem()">新增</button>
+      </div>
     </div>
     <div class="df-table">
-      <el-table
-        :data="tableData"
-        class="custom-table"
-        height="80vh"
-      >
+      <el-table :data="tableData" class="custom-table" height="80vh">
         <el-table-column type="index" label="序号" align="center" width="50" />
-        <el-table-column prop="category" align="center" label="category" />
-        <el-table-column prop="code" align="center" label="code" />
-        <el-table-column prop="id" align="center" label="id" />
-        <el-table-column prop="name" align="center" label="name" />
-        <el-table-column prop="remark" align="center" label="remark" />
-        <el-table-column prop="time" align="center" label="time" />
+        <el-table-column prop="name" align="center" label="故障名称" />
+        <el-table-column prop="code" align="center" label="故障编码" />
+        <el-table-column prop="time" align="center" label="创建时间" />
 
         <el-table-column align="center" label="操作">
           <template v-slot="scope">
@@ -58,30 +52,19 @@
           label-width="120px"
           size="default"
         >
-          <el-form-item
-            :label="`${ruleForm['category--name--']}：`"
-            prop="category"
-          >
+          <el-form-item :label="`${ruleForm['name--name--']}：`" prop="name">
             <el-input
-              v-model="ruleForm.category"
-              :placeholder="`请输入${ruleForm['category--name--']}`"
+              v-model="ruleForm.name"
+              :placeholder="`请输入${ruleForm['name--name--']}`"
               type="input"
             />
           </el-form-item>
-
           <el-form-item :label="`${ruleForm['code--name--']}：`" prop="code">
             <el-input
               v-model="ruleForm.code"
               :placeholder="`请输入${ruleForm['code--name--']}`"
               type="input"
-            />
-          </el-form-item>
-
-          <el-form-item :label="`${ruleForm['name--name--']}：`" prop="name">
-            <el-input
-              v-model="ruleForm.name"
-              :placeholder="`请输入${ruleForm['name--name--']}`"
-              type="input"
+              :disabled="codedisabled"
             />
           </el-form-item>
           <el-form-item
@@ -118,34 +101,21 @@ import { ElMessageBox } from "element-plus";
 export default {
   data() {
     return {
+      search: "",
+      sourceTableData: [],
       tableData: [],
       dialogTitle: "",
       dialogShow: false,
+      codedisabled: false,
       ruleForm: {
-        category: "",
-        "category--name--": "类型",
+        name: "",
+        "name--name--": "故障名称",
         code: "",
         "code--name--": "编码",
-        name: "",
-        "name--name--": "名称",
         remark: "",
-        "remark--name--": "remark",
+        "remark--name--": "备注",
       },
       rules: {
-        category: [
-          {
-            required: true,
-            message: "不可为空",
-            trigger: "blur",
-          },
-        ],
-        code: [
-          {
-            required: true,
-            message: "不可为空",
-            trigger: "blur",
-          },
-        ],
         name: [
           {
             required: true,
@@ -153,7 +123,7 @@ export default {
             trigger: "blur",
           },
         ],
-        remark: [
+        code: [
           {
             required: true,
             message: "不可为空",
@@ -164,19 +134,30 @@ export default {
     };
   },
 
+  computed: {},
+
   created() {
     this.getFaultType();
     this.renderRules();
   },
 
   methods: {
+    test(value) {
+      let tableData = [];
+      this.sourceTableData.forEach((ele) => {
+        if (ele.name.indexOf(value) !== -1) {
+          tableData.push(ele);
+        }
+      });
+      this.tableData = tableData;
+    },
     // 获取所有故障类型
     getFaultType() {
       const that = this;
       this.API.requestData({
-        baseURL: "http://192.168.1.18:9002/",
         subUrl: "know/fault/type/all",
         success(res) {
+          that.sourceTableData = res.data;
           that.tableData = res.data;
         },
       });
@@ -184,18 +165,14 @@ export default {
 
     // 取消新增或编辑
     cancel() {
-      const that = this;
-      ElMessageBox.alert("确定取消？所做的操作将不会被保存！", "", {
-        showCancelButton: true,
-        showConfirmButton: true,
-        confirmButtonText: "确定",
-        cancelButtonText: "我再想想",
-        callback(action) {
-          if (action === "confirm") {
-            that.dialogShow = false;
-          }
-        },
-      });
+      this.dialogShow = false;
+    },
+
+    //新增
+    insertItem() {
+      this.dialogShow = true;
+      this.dialogTitle = "新增";
+      this.codedisabled = false;
     },
 
     // 编辑某一条
@@ -206,6 +183,8 @@ export default {
         }
       }
       this.dialogShow = true;
+      this.dialogTitle = "编辑";
+      this.codedisabled = true;
     },
 
     // 删除某一条
@@ -219,7 +198,6 @@ export default {
         callback(action) {
           if (action === "confirm") {
             that.API.requestData({
-              baseURL: "http://192.168.1.18:9002/",
               subUrl: "know/fault/type/delete",
               data: {
                 id: row.id,
@@ -250,7 +228,6 @@ export default {
           }
           data.time = new Date().formatDate("yyyy-MM-dd hh:mm:ss");
           that.API.requestData({
-            baseURL: "http://192.168.1.18:9002/",
             subUrl: "know/fault/type/insert",
             data,
             success() {
@@ -294,8 +271,13 @@ export default {
 
 
 <style lang="less" scpoed>
-
+.el-form {
+  margin-left: 50px;
+}
 .el-form .el-form-item {
-  margin-bottom: 24px;
+  margin-top: 40px;
+  width: 500px;
+  display: flex;
+  justify-items: center;
 }
 </style>