数据管理UI调整，增加获取模板方法

src/api/data/template.js

@@ -0,0 +1,71 @@
+import { get, post, put } from "@/utils/requestMethod";
+
+/**
+ * 获取报表列表
+ * @param {*} page
+ * @param {*} page_size
+ * @param {*} template_type
+ * @param {*} templat_name
+ * @param {*} template_format
+ * @returns
+ */
+const getTableTemplateList = (
+  page,
+  page_size = 10,
+  template_type = 0,
+  templat_name = "",
+  template_format = ""
+) => {
+  return get(`/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&templat_name=${templat_name}&template_format=${template_format}`);
+};
+
+/**
+ * 添加报表模板
+ * @param {*} options 
+ */
+const addTableTemplate = (options) =>{
+  let params = new FormData()
+  params.append("template_type",0)
+  options.templatName!=="" && params.append("template_name",options.templatName)
+  options.templateFormat!=="" && params.append("template_format",options.templateFormat)
+  options.intro!=="" && params.append("introduction",options.intro)
+  return post("/data/template",params)
+}
+
+/**
+ * 添加报告模板
+ * @param {*} options 
+ */
+const addReportTemplate = (options) =>{
+  let params = new FormData()
+  params.append("template_type",0)
+  options.templatName!=="" && params.append("template_name",options.templatName)
+  options.templateFormat!=="" && params.append("template_format",options.templateFormat)
+  options.reportType !=="" && params.append("report_type",options.reportType)
+  options.intro!=="" && params.append("introduction",options.intro)
+  return post("/data/template",params)
+}
+
+/**
+ * 获取报告列表
+ * @param {*} page
+ * @param {*} page_size
+ * @param {*} template_type
+ * @param {*} templat_name
+ * @param {*} template_format
+ * @returns
+ */
+const getReportTemplateList = (
+  page,
+  page_size = 10,
+  template_type = 1,
+  templat_name = "",
+  template_format = "",
+  report_type = ""
+) => {
+  return get(
+    `/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&templat_name=${templat_name}&template_format=${template_format}&report_type=${report_type}`
+  );
+};
+
+export { getTableTemplateList, getReportTemplateList };

src/components/pagination/index.vue

@@ -36,6 +36,10 @@ export default {
   top: 10px;
   right: 350px;
 
+  /deep/.el-pager li:not(.disabled).active {
+    background-color: #2EA8E6 ;
+}
+
   /deep/.el-pagination__jump {
     margin-left: 0;
   }

src/utils/requestMethod.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 import user from "@/store/user"
 
-let currentToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX25hbWUiOiJcdTVmMjBcdTRlMDkiLCJleHAiOjE2ODA3NzEzOTV9.aQ51C_OIOoHDGi-ua6aGPdF2WqNGCgEp1IdqK_zdfOo"
+let currentToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX25hbWUiOiJcdTVmMjBcdTRlMDkiLCJleHAiOjE2ODA5MzM4Mzd9.FIkjJKlrssf4MYABzO2NQ76rxI4w6EOvqRm0aEi-LZY"
 
 function get(url, params) {
   return new Promise((resolve, reject) => {
@@ -29,7 +29,7 @@ function post(url, data) {
       url,
       data: data,
       headers: {
-        token: user.token || "",
+        token: user.token || currentToken,
         "Content-Type": "multipart/form-data;",
       },
     })
@@ -42,6 +42,26 @@ function post(url, data) {
   });
 }
 
+function put(url, data) {
+  return new Promise((resolve, reject) => {
+    service({
+      method: "PUT",
+      url,
+      data: data,
+      headers: {
+        token: user.token || currentToken,
+        "Content-Type": "application/json;",
+      },
+    })
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
 function del(url, data) {
   return new Promise((resolve, reject) => {
     request({
@@ -49,6 +69,7 @@ function del(url, data) {
       url,
       data: data,
       headers: {
+        token: user.token || currentToken,
         "Content-Type": "application/json;",
       },
     })
@@ -83,5 +104,6 @@ function delform(url, data) {
 
 export {
   get,
-  post
+  post,
+  put
 }

src/views/dataManagement/basicInfo/accessedSystem.vue

@@ -1,61 +1,102 @@
 <template>
-    <div>
-        <div style="width: 100%; height: 20px;margin-top: 10px;">
-            <p class="info">底层接入系统</p>
+  <div class="basic-inner">
+    <div class="info-outer">
+      <div class="info">底层接入系统</div>
+    </div>
+    <div class="center">
+      <el-upload action="#" list-type="picture-card" :auto-upload="false">
+        <i slot="default" class="el-icon-plus"></i>
+        <div slot="file" slot-scope="{ file }">
+          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+          <span class="el-upload-list__item-actions">
+            <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+            >
+              <i class="el-icon-zoom-in"></i>
+            </span>
+            <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleDownload(file)"
+            >
+              <i class="el-icon-download"></i>
+            </span>
+            <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+            >
+              <i class="el-icon-delete"></i>
+            </span>
+          </span>
         </div>
-        <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove">
-            <i class="el-icon-plus"></i>
-        </el-upload>
-        <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="item.imageUrl" alt="">
-        </el-dialog>
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="" />
+      </el-dialog>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dialogVisible: false,
-            item: {
-                imageUrl: '',
-            },
-            allImageUrl: [],
-        }
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
     },
-    methods: {
-        handleRemove(file, fileList) {
-            let removeUrl = file.respone.data.url;
-            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
-        },
-        handlePictureCardPreview(file) {
-            this.item.imageUrl = file.url;
-            this.dialogVisible = true;
-        }
-    }
-}
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.info {
-    position: absolute;
-    left: 50px;
-    font-size: 20px;
-}
-
-/deep/.el-upload--picture-card {
-    width: 300px;
-    height: 200px;
-    border: 1px solid #c0ccda;
-    margin-right: 1300px;
-    margin-top: 20px;
-}
+.basic-inner {
+  width: 100%;
+  height: 100%;
+  .info-outer {
+    width: 95%;
+    margin: 0 auto;
+    height: 80px;
+    .info {
+      font-size: 20px;
+      width: 200px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .center {
+    width: 98%;
+    margin: 0 auto;
+    height: calc(100% - 80px);
+    /deep/.el-upload--picture-card {
+      width: 300px;
+      height: 200px;
+      border: 1px solid #c0ccda;
+    //   margin-right: 1000px;
+    //   margin-top: 20px;
+    }
 
-/deep/.el-upload--picture-card i {
-    display: flex;
-    padding-right: 20px;
-    font-size: 50px;
-    padding: 75px 120px;
+    /deep/.el-upload--picture-card i {
+      display: flex;
+      padding-right: 20px;
+      font-size: 50px;
+      padding: 75px 120px;
+    }
+  }
 }
-</style>
+</style>

src/views/dataManagement/basicInfo/buildingInfo.vue

@@ -1,63 +1,155 @@
 <template>
-    <div>
-        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-            @selection-change="handleSelectionChange">
-            <el-table-column type="index" width="50" label="序号">
-            </el-table-column>
-            <el-table-column prop="buildingName" label="楼宇名称">
-            </el-table-column>
-            <el-table-column prop="contact_person" label="联系人">
-            </el-table-column>
-            <el-table-column prop="contact_phone" label="联系方式">
-            </el-table-column>
-            <el-table-column prop="operation" label="操作">
-                <template slot-scope="scope">
-                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">查看</el-button>
-                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">编辑</el-button>
-                    <el-button v-show="scope.row.buildingName == null ? false : true" size="mini" type="text">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <page class="page"></page>
+  <div class="basic-inner">
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      tooltip-effect="dark"
+      :header-cell-style="{ textAlign: 'center' }"
+      :cell-style="{ textAlign: 'center' }"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="index" width="70" label="序号"> </el-table-column>
+      <el-table-column prop="buildingName" label="楼宇名称"> </el-table-column>
+      <el-table-column prop="contact_person" label="联系人"> </el-table-column>
+      <el-table-column prop="contact_phone" label="联系方式"> </el-table-column>
+      <el-table-column prop="operation" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            v-show="scope.row.buildingName == null ? false : true"
+            size="mini"
+            type="text"
+            style="color: #2ea8e6"
+            >查看</el-button
+          >
+          <el-button
+            v-show="scope.row.buildingName == null ? false : true"
+            size="mini"
+            type="text"
+            style="color: #2ea8e6"
+            >编辑</el-button
+          >
+          <el-button
+            v-show="scope.row.buildingName == null ? false : true"
+            size="mini"
+            type="text"
+            style="color: #2ea8e6"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="bottom">
+      <page :paginationData="paginationData"></page>
     </div>
+  </div>
 </template>
 
 <script>
-import page from '@/components/pagination/index'
+import page from "@/components/pagination/index";
 export default {
-    components: { page },
-    data() {
-        return {
-            tableData: [{
-                buildingName: 'A',
-                contact_person: '张三',
-                contact_phone: '12345678901',
-            }, {
-                buildingName: 'B',
-                contact_person: '张三',
-                contact_phone: '12345678901',
-            }, {
-                buildingName: 'C',
-                contact_person: '张三',
-                contact_phone: '12345678901',
-            },],
-        }
-    },
-    methods: {
-
-    }
-}
+  components: { page },
+  data() {
+    return {
+      tableData: [
+        {
+          buildingName: "A",
+          contact_person: "张三",
+          contact_phone: "12345678901",
+        },
+        {
+          buildingName: "B",
+          contact_person: "张三",
+          contact_phone: "12345678901",
+        },
+        {
+          buildingName: "C",
+          contact_person: "张三",
+          contact_phone: "12345678901",
+        },
+      ],
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+    };
+  },
+  methods: {
+    getTableData(val) {},
+    handleSizeChange(val) {},
+    handleSelectionChange() {},
+  },
+};
 </script>
 <style lang="less" scoped>
-.el-table{
+.basic-inner {
+  width: 100%;
+  height: 100%;
+  .el-table {
+    height: calc(96% - 80px);
     width: 95% !important;
     margin-top: 20px;
     margin-left: 2.5%;
     margin-right: 2.5%;
-}
-.page{
+    font-size: 0.95rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #b2b2b2;
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid #f0f2f2;
+    /deep/th {
+      background: #f7fbff;
+    }
+    /deep/.el-checkbox {
+      color: #b2b2b2;
+      .el-checkbox__input.is-checked + .el-checkbox__label {
+        color: #2ea8e6;
+      }
+
+      .el-checkbox__input.is-checked .el-checkbox__inner::after {
+        width: 70%;
+        height: 70%;
+        background: #2ea8e6;
+        border-radius: 0;
+        transform: rotate(0deg) scaleY(1);
+        position: static;
+        // border: 1px solid #8DD9FF;
+      }
+
+      .el-checkbox__inner {
+        border: 1px solid #8dd9ff;
+        background: rgba(0, 170, 255, 0);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: static;
+        &::after {
+          transition: 0ms;
+        }
+      }
+
+      .el-checkbox__label {
+        padding-left: 0;
+        font-size: 15px;
+        position: absolute;
+        top: 1px;
+        left: 25px;
+      }
+    }
+  }
+  .bottom {
+    width: 100%;
+    height: 80px;
     position: relative;
-    margin-top: 20px;
+  }
 }
-</style>
+</style>

src/views/dataManagement/basicInfo/corporationInfo.vue

@@ -1,119 +1,144 @@
 <template>
-    <div class="content">
-        <el-form :model="form" label-position="left" label-width="80px">
-            <el-form-item style="width: 350px;" :model="form.manageUnit" label="管理单位：">
-                <el-input v-model="manageUnit" placeholder=""></el-input>
-            </el-form-item>
-            <el-form-item style="width: 350px;" :model="form.hostUnit" label="托管单位：">
-                <el-input v-model="hostUnit" placeholder=""></el-input>
-            </el-form-item>
-            <el-form-item style="width: 350px;" :model="form.profile" label="公司简介：">
-                <el-input v-model="profile" placeholder=""></el-input>
-            </el-form-item>
-            <el-form-item style="width: 500px;" :model="form.contact_person" label="联 系 人：">
-                <el-input v-model="contact_person" placeholder=""></el-input>
-            </el-form-item>
-            <el-form-item style="width: 500px;" :model="form.contact_num" label="联系方式：">
-                <el-input v-model="contact_num"></el-input>
-            </el-form-item>
-            <el-form-item style="width: 500px;" :model="form.imageUpload" label="上传图片：">
-                <el-upload action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
-                    :on-remove="handleRemove">
-                    <i class="el-icon-plus"></i>
-                </el-upload>
-                <el-dialog :visible.sync="dialogVisible">
-                    <img width="100%" :src="item.imageUrl" alt="">
-                </el-dialog>
-            </el-form-item>
-        </el-form>
-        <div class="bottom">
-            <el-button>重置</el-button>
-            <el-button>提交</el-button>
-        </div>
+  <div class="basic-inner">
+    <el-form label-position="left" label-width="80px">
+      <el-form-item style="width: 350px" label="管理单位：">
+        <el-input
+          v-model="form.manageUnit"
+          placeholder="请输入单位名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item style="width: 350px" label="托管单位：">
+        <el-input
+          v-model="form.hostUnit"
+          placeholder="请输入单位名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item style="width: 350px" label="公司简介：">
+        <el-input v-model="form.profile" placeholder=""></el-input>
+      </el-form-item>
+      <el-form-item style="width: 500px" label="联 系 人：">
+        <el-input v-model="form.contact_person" placeholder=""></el-input>
+      </el-form-item>
+      <el-form-item style="width: 500px" label="联系方式：">
+        <el-input v-model="form.contact_num"></el-input>
+      </el-form-item>
+      <el-form-item
+        style="width: 500px"
+        :model="form.imageUpload"
+        label="上传图片："
+      >
+        <el-upload
+          action="action"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="item.imageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+    </el-form>
+    <div class="bottom">
+      <el-button class="reset-btn">重置</el-button>
+      <el-button class="confirm-btn">提交</el-button>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dialogVisible:false,
-            item:{
-                imageUrl:'',
-            },
-            allImageUrl:[],
-            hostUnit: '',
-            profile: '',
-            contact_person: '',
-            contact_num: '',
-            hostUnit: '',
-            form: {
+  data() {
+    return {
+      dialogVisible: false,
+      item: {
+        imageUrl: "",
+      },
+      allImageUrl: [],
+      hostUnit: "",
+      profile: "",
+      contact_person: "",
+      contact_num: "",
+      hostUnit: "",
+      form: {
+        manageUnit: "",
+        hostUnit: "",
+        profile: "",
+        contact_person: "",
+        contact_num: "",
+      },
+      action: "", //上传地址
+    };
+  },
 
-            },
-            action: ''//上传地址
-        }
+  methods: {
+    handleRemove(file, fileList) {
+      let removeUrl = file.respone.data.url;
+      this.allImageUrl = this.allImageUrl.filter((item) => item != removeUrl);
     },
-
-    methods: {
-        handleRemove(file, fileList) {
-            let removeUrl = file.respone.data.url;
-            this.allImageUrl = this.allImageUrl.filter(item => item != removeUrl);
-        },
-        handlePictureCardPreview(file) {
-            this.item.imageUrl = file.url;
-            this.dialogVisible = true;
-        }
-    }
-}
+    handlePictureCardPreview(file) {
+      this.item.imageUrl = file.url;
+      this.dialogVisible = true;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.el-form {
-    margin-left: 100px;
-
+.basic-inner {
+  width: 100%;
+  height: 100%;
+  .el-form {
+    width: 90%;
+    height: calc(100% - 80px);
+    margin: 0 auto;
     .el-form-item {
-        padding-top: 20px;
-        margin-inline: 20px;
-        margin-bottom: 0;
+      padding-top: 20px;
+      margin-inline: 20px;
+      margin-bottom: 0;
     }
 
     /deep/.el-form-item__label {
-        padding: 0;
+      padding: 0;
     }
 
     /deep/.el-form-item__content {
-        display: flex;
+      display: flex;
     }
-}
-
-.el-button--text {
-    position: absolute;
-    top: 70px;
-    right: 20px;
-}
+  }
 
-.el-button {
-    height: 30px;
-    width: 100px;
-    margin-top: 20px;
-    margin-inline: 40px;
-    padding: 5px;
-}
-
-/deep/.el-upload--picture-card {
+  /deep/.el-upload--picture-card {
     width: 70px;
     height: 70px;
     border: 1px solid #c0ccda;
-}
+  }
 
-/deep/.el-upload--picture-card i {
+  /deep/.el-upload--picture-card i {
     display: flex;
     padding: 20px;
-}
+  }
 
-.bottom {
-    position: absolute;
-    left: 700px;
-    top: 700px;
+  .bottom {
+    width: 20%;
+    margin: 0 auto;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .reset-btn,
+    .confirm-btn {
+      color: #fff;
+      height: 40px;
+      width: 100px;
+      border-radius: 5px;
+    }
+    .reset-btn {
+      background: #b3b3b3;
+    }
+    .confirm-btn {
+      background: #2ea8e6;
+    }
+  }
 }
-</style>
+</style>

src/views/dataManagement/basicInfo/index.vue

@@ -1,70 +1,82 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <el-button @click="Show1()">公司基本信息</el-button>
-            <el-button @click="Show2()">楼宇基本信息</el-button>
-            <el-button @click="Show3()">底层系统信息</el-button>
-        </div>
-        <corporation-info v-show="show1"></corporation-info>
-        <building-info v-show="show2"></building-info>
-        <accessedSystem v-show="show3"></accessedSystem>
+  <div class="container">
+    <div class="header">
+      <el-button @click="Show1()">公司基本信息</el-button>
+      <el-button @click="Show2()">楼宇基本信息</el-button>
+      <el-button @click="Show3()">底层系统信息</el-button>
     </div>
+    <corporation-info v-if="show1" class="content"></corporation-info>
+    <building-info v-if="show2" class="content"></building-info>
+    <accessedSystem v-if="show3" class="content"></accessedSystem>
+  </div>
 </template>
 
 <script>
-import CorporationInfo from './corporationInfo'
-import buildingInfo from './buildingInfo'
-import accessedSystem from './accessedSystem'
+import CorporationInfo from "./corporationInfo";
+import buildingInfo from "./buildingInfo";
+import accessedSystem from "./accessedSystem";
 export default {
-    components: { CorporationInfo ,buildingInfo,accessedSystem},
-    data() {
-        return {
-            show1:true,
-            show2:false,
-            show3:false
-        }
+  components: { CorporationInfo, buildingInfo, accessedSystem },
+  data() {
+    return {
+      show1: true,
+      show2: false,
+      show3: false,
+    };
+  },
+  methods: {
+    Show1() {
+      this.show1 = true;
+      this.show2 = false;
+      this.show3 = false;
     },
-    methods:{
-        Show1(){
-            this.show1 = true;
-            this.show2 = false;
-            this.show3 = false;
-        },
-        Show2(){
-            this.show1 = false;
-            this.show2 = true;
-            this.show3 = false;
-        },
-        Show3(){
-            this.show1 = false;
-            this.show2 = false;
-            this.show3 = true;
-        },
-    }
-}
+    Show2() {
+      this.show1 = false;
+      this.show2 = true;
+      this.show3 = false;
+    },
+    Show3() {
+      this.show1 = false;
+      this.show2 = false;
+      this.show3 = true;
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 .container {
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    bottom: 20px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-}
-
-.header {
+  position: absolute;
+  left: 218px;
+  top: 77px;
+  right: 16px;
+  bottom: 20px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: center;
+  .header {
     text-align: left;
-    padding: 15px;
+    // padding: 15px;
     font-size: 25px;
-    margin-left: 15px;
+    width: 95%;
+    margin: 0 auto;
+    height: 60px;
+    display: flex;
+    align-items: center;
 
     .el-button {
-        border-radius: 50px;
+      border-radius: 50px;
+      margin-right: 30px;
+      &:focus,
+      &:hover {
+        background: #2ea8e6;
+        color: #fff;
+      }
     }
+  }
+  .content {
+    height: calc(100% - 60px);
+  }
 }
-</style>
+</style>

src/views/dataManagement/reportConfig.vue

@@ -1,244 +1,431 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <el-form label-width="120px">
-                <div style="display: flex; padding:10px;">
-                    <el-form-item :model="form.templateList" label="报表模板名称：">
-                        <el-input ref="search" v-model="input" suffix-icon="el-icon-search" placeholder="请输入"></el-input>
-                    </el-form-item>
-                    <el-form-item :model="form.templateForm" label="报表模板格式：">
-                        <el-select placeholder="全部">
-                            <el-option label=""></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :model="form.reportType" label="报告类型：">
-                        <el-select placeholder="报告">
-                            <el-option label=""></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-button style="padding: 5px;width: 80px;margin-left: 160px;margin-right: 20px;">重置</el-button>
-                    <el-button style="padding: 5px;width: 80px; background-color: #409EFF;color: #FFF;">查询</el-button>
-                </div>
-            </el-form>
-        </div>
-        <div class="content">
-            <div>
-                <p class="info">模板列表</p>
-                <el-button class="new_button">添加模板</el-button>
-            </div>
-            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50">
-                </el-table-column>
-                <el-table-column prop="templateName" label="模板名称">
-                </el-table-column>
-                <el-table-column prop="templateForm" label="模板格式">
-                </el-table-column>
-                <el-table-column prop="createUser" label="创建用户">
-                </el-table-column>
-                <el-table-column prop="createTime" label="创建时间">
-                </el-table-column>
-                <el-table-column prop="alterTime" label="修改时间">
-                </el-table-column>
-                <el-table-column prop="operation" label="操作">
-                    <template slot-scope="scope">
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">查看</el-button>
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">编辑</el-button>
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <div class="bottom">
-            <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="disabled" type="text">批量激活</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="export" type="text">导出数据</el-button>
-            </div>
-            <page></page>
+  <div class="container">
+    <div class="header">
+      <el-form label-width="120px">
+        <div style="display: flex; padding: 10px">
+          <el-form-item label="报告模板名称：">
+            <el-input
+              ref="search"
+              v-model="form.templateName"
+              suffix-icon="el-icon-search"
+              placeholder="请输入模板名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="报告模板格式：">
+            <el-select
+              placeholder="请选择模板格式"
+              v-model="form.templateFormat"
+            >
+              <el-option
+                v-for="item in reportFormatOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="报告类型：">
+            <el-select placeholder="请选择报告类型" v-model="form.reportType">
+              <el-option
+                v-for="item in reportTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-button class="reset-btn">重置</el-button>
+          <el-button class="search-btn">查询</el-button>
         </div>
+      </el-form>
+    </div>
+    <div class="content">
+      <div class="content-inner-top">
+        <div class="info">模板列表</div>
+        <el-button class="add-btn">添加模板</el-button>
+        <el-button class="delete-btn">批量删除</el-button>
+      </div>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        :header-cell-style="{ textAlign: 'center' }"
+        :cell-style="{ textAlign: 'center' }"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50"> </el-table-column>
+        <el-table-column prop="templateName" label="模板名称">
+        </el-table-column>
+        <el-table-column prop="templateFormat" label="模板格式">
+        </el-table-column>
+        <el-table-column prop="createUser" label="创建用户"> </el-table-column>
+        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
+        <el-table-column prop="alterTime" label="修改时间"> </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >查看</el-button
+            >
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >编辑</el-button
+            >
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="bottom">
+      <page :paginationData="paginationData"></page>
     </div>
+  </div>
 </template>
 
 <script>
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
 export default {
-    components: { checkbox, page },
-    data() {
-        return {
-            total: 0,
-            input: '',
-            show: true,
-            form: {
-            },
-            tableData: [
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-            ],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            }
-        }
+  components: { checkbox, page },
+  data() {
+    return {
+      total: 0,
+      input: "",
+      show: true,
+      form: {
+        templateName: "",
+        templateFormat: "",
+        reportType: "",
+      },
+      reportFormatOptions: [
+        {
+          value: "",
+          label: "全部",
+        },
+        {
+          value: "Word",
+          label: "Word",
+        },
+        {
+          value: "Excel",
+          label: "Excel",
+        },
+        {
+          value: "PDF",
+          label: "PDF",
+        },
+      ],
+      reportTypeOptions: [
+        {
+          value: "",
+          label: "全部",
+        },
+        {
+          value: "年度报告",
+          label: "年度报告",
+        },
+        {
+          value: "季度报告",
+          label: "季度报告",
+        },
+        {
+          value: "月度报告",
+          label: "月度报告",
+        },
+      ],
+      tableData: [
+        {
+          templateName: "模板1",
+          templateFormat: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+        {
+          templateName: "模板1",
+          templateFormat: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+        {
+          templateName: "模板1",
+          templateFormat: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      currentPageSize: 10,
+      currentPage: 1,
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+      multipleSelection: [],
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.search.filter(val);
     },
-    watch: {
-        filterText(val) {
-            this.$refs.search.filter(val);
-        }
+  },
+  methods: {
+    initData() {
+      this.getTableData(1);
     },
-    methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        }
-    }
-}
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    getTableData(val) {},
+    handleSizeChange(val) {},
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .container {
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    bottom: 20px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  left: 218px;
+  top: 80px;
+  right: 16px;
+  bottom: 20px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: center;
+  overflow-y: auto;
+  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
-    .header {
-        margin: 2.5%;
-        height: 60px;
-        background-color: rgb(221, 220, 219);
+  .header {
+    margin: 2%;
+    width: 96%;
+    height: 60px;
+    background-color: #fafafa;
+    position: relative;
+    border-radius: 4px;
+
+    .reset-btn,
+    .search-btn {
+      height: 30px;
+      width: 80px;
+      position: absolute;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 15px;
+    }
+    .reset-btn {
+      background-color: #b3b3b3;
+      right: 130px;
+    }
+    .search-btn {
+      background-color: #2ea8e6;
+      right: 25px;
+    }
 
-        .el-form-item {
-            margin-bottom: 0 !important;
-            margin-right: 60px !important;
+    .el-form-item {
+      margin-bottom: 0 !important;
+      margin-right: 60px !important;
 
-            /deep/.el-form-item {
-                margin-right: 50px;
-                margin-bottom: 0;
-            }
+      /deep/.el-form-item {
+        margin-right: 50px;
+        margin-bottom: 0;
+      }
 
-            /deep/.el-form-item__content {
-                margin-left: 120px;
-            }
-        }
+      /deep/.el-form-item__content {
+        margin-left: 120px;
+      }
     }
+  }
 
-    .content {
-        width: 95%;
+  .content {
+    width: 95%;
+    position: absolute;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+    margin-top: 30px;
+    height: calc(80% - 110px);
+    &-inner-top {
+      width: 100%;
+      height: 100px;
+      position: absolute;
+      .info {
         position: absolute;
-        margin-left: 2.5%;
-        margin-right: 2.5%;
+        width: 150px;
+        top: 0;
+        left: 0;
+        height: 60px;
+        font-size: 25px;
+        display: flex;
+        align-items: center;
+        font-weight: 550;
+        color: #4d4d4d;
+      }
+      .add-btn,
+      .delete-btn {
+        padding: 3px;
+        width: 80px;
+        height: 30px;
+        bottom: 15px;
+        position: absolute;
+        color: #fff;
+        border-radius: 4px;
+      }
+      .add-btn {
+        right: 100px;
+        background-color: #2ea8e6;
+      }
+      .delete-btn {
+        right: 10px;
+        background-color: #b3b3b3;
+      }
+    }
+
+    .el-table {
+      position: absolute;
+      top: 100px;
+      width: 100%;
+      height: calc(100% - 100px);
+      border: 1px solid #f0f2f2;
+      margin-top: 10px;
+      font-size: 0.95rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #b2b2b2;
+      background: rgba(255, 255, 255, 0.8);
 
-        .info {
-            text-align: left;
-            padding: 10px;
-            font-size: 25px;
+      /deep/th {
+        background: #f7fbff;
+      }
+      /deep/.el-checkbox {
+        color: #b2b2b2;
+        .el-checkbox__input.is-checked + .el-checkbox__label {
+          color: #2ea8e6;
         }
 
-        .new_button {
-            padding: 5px;
-            width: 80px;
-            position: relative;
-            left: 760px;
-            background-color: #409EFF;
-            color: #FFF;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+          width: 70%;
+          height: 70%;
+          background: #2ea8e6;
+          border-radius: 0;
+          transform: rotate(0deg) scaleY(1);
+          position: static;
+          // border: 1px solid #8DD9FF;
         }
 
-        .el-table {
-            margin-top: 10px;
+        .el-checkbox__inner {
+          border: 1px solid #8dd9ff;
+          background: rgba(0, 170, 255, 0);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: static;
+          &::after {
+            transition: 0ms;
+          }
         }
 
-        .el-select {
-            width: 80px;
-            margin-right: 20px;
+        .el-checkbox__label {
+          padding-left: 0;
+          font-size: 15px;
+          position: absolute;
+          top: 1px;
+          left: 25px;
         }
+      }
     }
 
-    .bottom {
-        position: absolute;
-        left: 20px;
-        right: 16px;
-        bottom: 20px;
-        height: 50px;
-        line-height: 20px;
-        background-color: rgba(255, 255, 255, 1);
-        text-align: center;
+    .el-select {
+      width: 80px;
+      margin-right: 20px;
+    }
+  }
 
-        .checkbox {
-            position: absolute;
-            left: 29px;
-            top: 15px;
-            font-size: 14px;
-        }
+  .bottom {
+    position: absolute;
+    left: 20px;
+    right: 16px;
+    bottom: 20px;
+    height: 50px;
+    line-height: 20px;
+    background-color: rgba(255, 255, 255, 1);
+    text-align: center;
 
-        .check-cancel {
-            position: absolute;
-            // line-height: 20px;
-            font-size: 14px;
-            text-align: center;
-            left: 140px;
-            top: 10px;
-        }
+    .checkbox {
+      position: absolute;
+      left: 29px;
+      top: 15px;
+      font-size: 14px;
+    }
 
-        .bottom_button {
-            position: absolute;
-            left: 200px;
-            margin-top: 15px;
-
-            .delete {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
-
-            .disabled {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
-
-            .export {
-                font-size: 14px;
-                text-align: center;
-                padding: 1px;
-            }
-        }
+    .check-cancel {
+      position: absolute;
+      // line-height: 20px;
+      font-size: 14px;
+      text-align: center;
+      left: 140px;
+      top: 10px;
+    }
+
+    .bottom_button {
+      position: absolute;
+      left: 200px;
+      margin-top: 15px;
+
+      .delete {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
+
+      .disabled {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
+
+      .export {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
     }
+  }
 }
-</style>
+</style>

src/views/dataManagement/statementConfig.vue

@@ -1,191 +1,352 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <el-form label-width="120px">
-                <div style="display: flex; padding:10px;">
-                    <el-form-item :model="form.templateList" label="报表模板名称：">
-                        <el-input ref="search" v-model="input" suffix-icon="el-icon-search" placeholder="请输入"></el-input>
-                    </el-form-item>
-                    <el-form-item :model="form.templateForm" label="报表模板格式：">
-                        <el-select placeholder="全部">
-                            <el-option label=""></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-button style="padding: 5px;width: 80px;margin-left: 560px;margin-right: 20px;">重置</el-button>
-                    <el-button style="padding: 5px;width: 80px; background-color: #409EFF;color: #FFF;">查询</el-button>
-                </div>
-            </el-form>
-        </div>
-        <div class="content">
-            <div>
-                <p class="info">模板列表</p>
-                <el-button class="new_button">添加模板</el-button>
-            </div>
-            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50">
-                </el-table-column>
-                <el-table-column prop="templateName" label="模板名称">
-                </el-table-column>
-                <el-table-column prop="templateForm" label="模板格式">
-                </el-table-column>
-                <el-table-column prop="createUser" label="创建用户">
-                </el-table-column>
-                <el-table-column prop="createTime" label="创建时间">
-                </el-table-column>
-                <el-table-column prop="alterTime" label="修改时间">
-                </el-table-column>
-                <el-table-column prop="operation" label="操作">
-                    <template slot-scope="scope">
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">查看</el-button>
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">编辑</el-button>
-                        <el-button v-show="scope.row.templateName == null ? false : true" size="mini"
-                            type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <div class="bottom">
-            <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="disabled" type="text">批量激活</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="export" type="text">导出数据</el-button>
-            </div>
-            <page></page>
+  <div class="container">
+    <div class="header">
+      <el-form label-width="120px">
+        <div style="display: flex; padding: 10px">
+          <el-form-item label="报表模板名称：">
+            <el-input
+              ref="search"
+              v-model="form.templateName"
+              suffix-icon="el-icon-search"
+              placeholder="请输入模板名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="报表模板格式：">
+            <el-select
+              placeholder="请选择报表模板格式"
+              v-model="form.templateForm"
+            >
+              <el-option
+                v-for="item in temFormatOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-button class="reset-btn">重置</el-button>
+          <el-button class="search-btn">查询</el-button>
         </div>
+      </el-form>
+    </div>
+    <div class="content">
+      <div class="content-inner-top">
+        <div class="info">模板列表</div>
+        <el-button class="add-btn">添加模板</el-button>
+        <el-button class="delete-btn">批量删除</el-button>
+      </div>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        :header-cell-style="{ textAlign: 'center' }"
+        :cell-style="{ textAlign: 'center' }"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50"> </el-table-column>
+        <el-table-column prop="templateName" label="模板名称">
+        </el-table-column>
+        <el-table-column prop="templateForm" label="模板格式">
+        </el-table-column>
+        <el-table-column prop="createUser" label="创建用户"> </el-table-column>
+        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
+        <el-table-column prop="alterTime" label="修改时间"> </el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >查看</el-button
+            >
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >编辑</el-button
+            >
+            <el-button
+              v-show="scope.row.templateName == null ? false : true"
+              size="mini"
+              type="text"
+              style="color: #2ea8e6"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <div class="bottom">
+      <page :paginationData="paginationData"></page>
+    </div>
+  </div>
 </template>
 
 <script>
-import checkbox from '@/components/Checkbox/index'
-import page from '@/components/pagination/index'
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
 export default {
-    components: { checkbox, page },
-    data() {
-        return {
-            total: 0,
-            input: '',
-            show: true,
-            form: {
-            },
-            tableData: [
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-                {
-                    templateName: '模板1',
-                    templateForm: 'txt',
-                    createUser: 'test',
-                    createTime: '2023-01-01 00:00',
-                    alterTime: '2023-01-01 00:00',
-                },
-            ],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
-            }
-        }
+  components: { checkbox, page },
+  data() {
+    return {
+      total: 0,
+      input: "",
+      show: true,
+      form: {
+        templateName: "",
+        templateForm: "",
+      },
+      tableData: [
+        {
+          templateName: "模板1",
+          templateForm: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+        {
+          templateName: "模板1",
+          templateForm: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+        {
+          templateName: "模板1",
+          templateForm: "txt",
+          createUser: "test",
+          createTime: "2023-01-01 00:00",
+          alterTime: "2023-01-01 00:00",
+        },
+      ],
+      temFormatOptions: [
+        {
+          value: "",
+          label: "全部",
+        },
+        {
+          value: "Word",
+          label: "Word",
+        },
+        {
+          value: "Excel",
+          label: "Excel",
+        },
+        {
+          value: "PDF",
+          label: "PDF",
+        },
+      ],
+
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      currentPageSize: 10,
+      currentPage: 1,
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+      multipleSelection: [],
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.search.filter(val);
     },
-    watch: {
-        filterText(val) {
-            this.$refs.search.filter(val);
-        }
+  },
+  methods: {
+    initData() {
+      this.getTableData(1);
     },
-    methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        }
-    }
-}
+    getTableData(val) {},
+    handleSizeChange(val) {},
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .container {
-    position: absolute;
-    left: 218px;
-    top: 77px;
-    right: 16px;
-    bottom: 20px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  left: 218px;
+  top: 80px;
+  right: 16px;
+  bottom: 20px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: center;
+  overflow-y: auto;
+  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
-    .header {
-        margin: 2.5%;
-        height: 60px;
-        background-color: rgb(221, 220, 219);
+  .header {
+    margin: 2%;
+    width: 96%;
+    height: 60px;
+    background-color: #fafafa;
+    position: relative;
+    border-radius: 4px;
+
+    .reset-btn,
+    .search-btn {
+      height: 30px;
+      width: 80px;
+      position: absolute;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 15px;
+    }
+    .reset-btn {
+      background-color: #b3b3b3;
+      right: 130px;
+    }
+    .search-btn {
+      background-color: #2ea8e6;
+      right: 25px;
+    }
 
-        .el-form-item {
-            margin-bottom: 0 !important;
-            margin-right: 60px !important;
+    .el-form-item {
+      margin-bottom: 0 !important;
+      margin-right: 60px !important;
 
-            /deep/.el-form-item {
-                margin-right: 50px;
-                margin-bottom: 0;
-            }
+      /deep/.el-form-item {
+        margin-right: 50px;
+        margin-bottom: 0;
+      }
 
-            /deep/.el-form-item__content {
-                margin-left: 120px;
-            }
-        }
+      /deep/.el-form-item__content {
+        margin-left: 120px;
+      }
     }
+  }
 
-    .content {
-        width: 95%;
+  .content {
+    width: 95%;
+    position: absolute;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+    margin-top: 30px;
+    height: calc(80% - 110px);
+    &-inner-top {
+      width: 100%;
+      height: 100px;
+      position: absolute;
+      .info {
+        position: absolute;
+        width: 150px;
+        top: 0;
+        left: 0;
+        height: 60px;
+        font-size: 25px;
+        display: flex;
+        align-items: center;
+        font-weight: 550;
+        color: #4d4d4d;
+      }
+      .add-btn,
+      .delete-btn {
+        padding: 3px;
+        width: 80px;
+        height: 30px;
+        bottom: 15px;
         position: absolute;
-        margin-left: 2.5%;
-        margin-right: 2.5%;
+        color: #fff;
+        border-radius: 4px;
+      }
+      .add-btn {
+        right: 100px;
+        background-color: #2ea8e6;
+      }
+      .delete-btn {
+        right: 10px;
+        background-color: #b3b3b3;
+      }
+    }
+
+    .el-table {
+      position: absolute;
+      top: 100px;
+      width: 100%;
+      height: calc(100% - 100px);
+      border: 1px solid #f0f2f2;
+      margin-top: 10px;
+      font-size: 0.95rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #b2b2b2;
+      background: rgba(255, 255, 255, 0.8);
 
-        .info {
-            text-align: left;
-            padding: 10px;
-            font-size: 25px;
+      /deep/th {
+        background: #f7fbff;
+      }
+      /deep/.el-checkbox {
+        color: #b2b2b2;
+        .el-checkbox__input.is-checked + .el-checkbox__label {
+          color: #2ea8e6;
         }
 
-        .new_button {
-            padding: 5px;
-            width: 80px;
-            position: relative;
-            left: 760px;
-            background-color: #409EFF;
-            color: #FFF;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+          width: 70%;
+          height: 70%;
+          background: #2ea8e6;
+          border-radius: 0;
+          transform: rotate(0deg) scaleY(1);
+          position: static;
+          // border: 1px solid #8DD9FF;
         }
 
-        .el-table {
-            margin-top: 10px;
+        .el-checkbox__inner {
+          border: 1px solid #8dd9ff;
+          background: rgba(0, 170, 255, 0);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: static;
+          &::after {
+            transition: 0ms;
+          }
         }
 
-        .el-select {
-            width: 80px;
-            margin-right: 20px;
+        .el-checkbox__label {
+          padding-left: 0;
+          font-size: 15px;
+          position: absolute;
+          top: 1px;
+          left: 25px;
         }
+      }
+    }
+
+    .el-select {
+      width: 80px;
+      margin-right: 20px;
     }
+  }
 
-    .bottom {
+  .bottom {
     position: absolute;
     left: 20px;
     right: 16px;
@@ -196,44 +357,44 @@ export default {
     text-align: center;
 
     .checkbox {
-        position: absolute;
-        left: 29px;
-        top: 15px;
-        font-size: 14px;
+      position: absolute;
+      left: 29px;
+      top: 15px;
+      font-size: 14px;
     }
 
     .check-cancel {
-        position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
-        text-align: center;
-        left: 140px;
-        top: 10px;
+      position: absolute;
+      // line-height: 20px;
+      font-size: 14px;
+      text-align: center;
+      left: 140px;
+      top: 10px;
     }
 
     .bottom_button {
-        position: absolute;
-        left: 200px;
-        margin-top: 15px;
+      position: absolute;
+      left: 200px;
+      margin-top: 15px;
 
-        .delete {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+      .delete {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
 
-        .disabled {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+      .disabled {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
 
-        .export {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+      .export {
+        font-size: 14px;
+        text-align: center;
+        padding: 1px;
+      }
     }
+  }
 }
-}
-</style>
+</style>

src/views/deviceManagement/deviceConfig.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="container">
     <div class="left-pane">
-      <el-input placeholder="告警类别" v-model="filterText" class="left-input">
-        <template slot="append">
-          <i
-            class="el-icon-search"
-            style="cursor: pointer"
-            @click="searchTypeEvent"
-          ></i>
-        </template>
+      <el-input
+        placeholder="告警类别"
+        v-model="filterText"
+        class="left-input"
+        suffix-icon="el-icon-search"
+      >
       </el-input>
       <el-tree
         ref="tree"
@@ -39,9 +37,16 @@
           <el-input
             class="search-input"
             v-model="searchInput"
-            placeholder="请输入"
-            suffix-icon="el-icon-search"
-          ></el-input>
+            placeholder="请输入搜索内容"
+          >
+            <template slot="append">
+              <i
+                class="el-icon-search"
+                style="cursor: pointer"
+                @click="searchTypeEvent"
+              ></i>
+            </template>
+          </el-input>
         </div>
         <div class="center">
           <el-table
@@ -75,13 +80,16 @@
                   v-show="scope.row.deviceID == null ? false : true"
                   size="mini"
                   type="text"
-                  @click="deviceEdit()"
+                  @click="deviceEdit"
+                  style="color: #2ea8e6"
                   >编辑</el-button
                 >
                 <el-button
                   v-show="scope.row.deviceID == null ? false : true"
                   size="mini"
                   type="text"
+                  style="color: #2ea8e6"
+                  @click="deviceDelete(scope.row)"
                   >删除</el-button
                 >
               </template>
@@ -213,15 +221,16 @@ export default {
     deviceEdit() {
       this.$refs.deviceEdit.dialogVisible = true;
     },
+    deviceDelete(data) {
+      // this.tableData = this.tableData.filter(()=>{
+      // })
+    },
     handleSelectionChange() {
       //
     },
     handleNodeClick() {
       //
     },
-    cancelChecked() {
-      //
-    },
     batchDelete() {},
   },
 };

src/views/deviceManagement/deviceWarning.vue

@@ -2,13 +2,6 @@
   <div class="container">
     <div class="left-pane">
       <el-input placeholder="告警类别" v-model="filterText" class="left-input">
-        <template slot="append">
-          <i
-            class="el-icon-search"
-            style="cursor: pointer"
-            @click="searchTypeEvent"
-          ></i>
-        </template>
       </el-input>
       <el-tree
         ref="tree"
@@ -33,9 +26,16 @@
           <el-input
             class="search-input"
             v-model="searchInput"
-            placeholder="请输入"
-            suffix-icon="el-icon-search"
-          ></el-input>
+            placeholder="请输入搜索内容"
+          >
+            <template slot="append">
+              <i
+                class="el-icon-search"
+                style="cursor: pointer"
+                @click="searchEvent"
+              ></i>
+            </template>
+          </el-input>
         </div>
         <div class="center">
           <el-table
@@ -57,9 +57,15 @@
             </el-table-column>
             <el-table-column prop="Respon" label="责任人"> </el-table-column>
             <el-table-column prop="operation" label="操作">
-              <el-button size="mini" type="text">查看</el-button>
-              <el-button size="mini" type="text">编辑</el-button>
-              <el-button size="mini" type="text">删除</el-button>
+              <el-button size="mini" type="text" style="color: #2ea8e6"
+                >查看</el-button
+              >
+              <el-button size="mini" type="text" style="color: #2ea8e6"
+                >编辑</el-button
+              >
+              <el-button size="mini" type="text" style="color: #2ea8e6"
+                >删除</el-button
+              >
             </el-table-column>
           </el-table>
         </div>
@@ -155,8 +161,8 @@ export default {
     getTableData() {},
     handleSizeChange() {},
     batchDelete() {},
-    searchTypeEvent() {
-      console.log("查询告警类别");
+    searchEvent() {
+      console.log("查询");
     },
   },
 };

src/views/deviceManagement/messageDailog/addDevice.vue

@@ -1,167 +1,237 @@
 <template>
-    <div>
-        <el-dialog v-dialog-drag class="dialog" title="添加设备" :visible.sync="dialogVisible" width="25%" center>
-            <el-divider></el-divider>
-            <div class="container">
-                <div class="leftpane">
-                    <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
-                        @node-click="handleNodeClick">
-                    </el-tree>
-                </div>
-                <div class="rightpane">
-                    <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
-                    <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
-                        style="width: 100%" @selection-change="handleSelectionChange">
-                        <el-table-column type="selection" width="50">
-                        </el-table-column>
-                        <el-table-column prop="deviceID" label="设备ID">
-                        </el-table-column>
-                        <el-table-column prop="devicePosition" label="设备位置">
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary">确认</el-button>
-            </div>
-        </el-dialog>
-    </div>
+  <div>
+    <el-dialog
+      v-dialog-drag
+      class="dialog"
+      title="添加设备"
+      :visible.sync="dialogVisible"
+      width="25%"
+      center
+    >
+      <el-divider></el-divider>
+      <div class="container">
+        <div class="leftpane">
+          <el-tree
+            ref="tree"
+            :data="data"
+            :props="defaultProps"
+            node-key="id"
+            default-expand-all
+            @node-click="handleNodeClick"
+          >
+          </el-tree>
+        </div>
+        <div class="rightpane">
+          <el-input
+            class="search"
+            v-model="filter"
+            placeholder="请输入"
+            suffix-icon="el-icon-search"
+          ></el-input>
+          <el-table
+            ref="multipleTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            :header-cell-style="{ textAlign: 'center' }"
+            :cell-style="{ textAlign: 'center' }"
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="50"> </el-table-column>
+            <el-table-column prop="deviceID" label="设备ID"> </el-table-column>
+            <el-table-column prop="devicePosition" label="设备位置">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="dialogVisible = false"
+          style="background: #b3b3b3; color: #fff"
+          >取消</el-button
+        >
+        <el-button type="primary" style="background: #2ea8e6">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dialogVisible: false,
-            filter: '',
-            data: [{
-                label: '设备种类',
-                children: [
-                    {
-                        label: '摄像头'
-                    },
-                    {
-                        label: '门禁设备'
-                    },
-                    {
-                        label: '水浸设备'
-                    },
-                    {
-                        label: '电表设备'
-                    },
-                    {
-                        label: '其他设备'
-                    }
-                ]
-            }],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
+  data() {
+    return {
+      dialogVisible: false,
+      filter: "",
+      data: [
+        {
+          label: "设备种类",
+          children: [
+            {
+              label: "摄像头",
             },
-            tableData: [{
-                deviceID: '111',
-                devicePosition: '1F-101'
-            }, {
-                deviceID: '112',
-                devicePosition: '1F-101'
-            }, {
-                deviceID: '113',
-                devicePosition: '1F-101'
-            }]
-        }
-    },
-    methods: {
-        handleNodeClick() {
-
+            {
+              label: "门禁设备",
+            },
+            {
+              label: "水浸设备",
+            },
+            {
+              label: "电表设备",
+            },
+            {
+              label: "其他设备",
+            },
+          ],
         },
-        handleSelectionChange() {
-
-        }
-    }
-
-}
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      tableData: [
+        {
+          deviceID: "111",
+          devicePosition: "1F-101",
+        },
+        {
+          deviceID: "112",
+          devicePosition: "1F-101",
+        },
+        {
+          deviceID: "113",
+          devicePosition: "1F-101",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleNodeClick() {},
+    handleSelectionChange() {},
+  },
+};
 </script>
 <style lang="less" scoped>
 .container {
-    height: 450px;
-    width: 95%;
-    margin-left: 2.5%;
-    border: 0.5px solid rgb(247, 245, 243);
-    margin-top: 20px;
-    display: flex;
-
-    .leftpane {
-        width: 150px;
-
-        .el-tree {
-            height: 450px;
-            background-color: rgb(247, 245, 243);
-        }
+  height: 450px;
+  width: 95%;
+  margin-left: 2.5%;
+  border: 0.5px solid rgb(247, 245, 243);
+  margin-top: 20px;
+  display: flex;
+
+  .leftpane {
+    width: 150px;
+
+    .el-tree {
+      height: 450px;
+      background-color: rgb(247, 245, 243);
     }
+  }
 
-    .rightpane {
-        .search {
-            width: 250px;
-            margin-left: 60px;
+  .rightpane {
+    .search {
+      width: 250px;
+      margin-left: 60px;
 
-            /deep/.el-input__inner {
-                height: 35px;
-            }
+      /deep/.el-input__inner {
+        height: 35px;
+      }
+    }
+
+    .el-table {
+      margin-top: 20px;
+      width: 95% !important;
+      margin-left: 5%;
+      border: 1px solid #f0f2f2;
+      font-size: 0.95rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #b2b2b2;
+      background: rgba(255, 255, 255, 0.8);
+      /deep/th {
+        background: #f7fbff;
+      }
+      /deep/.el-checkbox {
+        color: #b2b2b2;
+        .el-checkbox__input.is-checked + .el-checkbox__label {
+          color: #2ea8e6;
         }
 
-        .el-table {
-            margin-top: 20px;
-            width: 95% !important;
-            margin-left: 5%;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+          width: 70%;
+          height: 70%;
+          background: #2ea8e6;
+          border-radius: 0;
+          transform: rotate(0deg) scaleY(1);
+          position: static;
+          // border: 1px solid #8DD9FF;
         }
+
+        .el-checkbox__inner {
+          border: 1px solid #8dd9ff;
+          background: rgba(0, 170, 255, 0);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: static;
+          &::after {
+            transition: 0ms;
+          }
+        }
+
+        .el-checkbox__label {
+          padding-left: 0;
+          font-size: 15px;
+          position: absolute;
+          top: 1px;
+          left: 25px;
+        }
+      }
     }
+  }
 }
 
 /deep/.el-dialog {
-    height: 600px !important;
+  height: 600px !important;
 }
 
 .el-select {
-    width: 280px;
+  width: 280px;
 }
 
-
-
 /deep/.el-dialog {
-    height: 30vh;
+  height: 30vh;
 }
 
 /deep/.el-dialog__title {
-    margin-right: 330px;
+  margin-right: 330px;
 }
 
 /deep/.el-dialog__headerbtn {
-    font-size: 25px;
+  font-size: 25px;
 }
 
 /deep/.el-dialog__body {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 95%;
-    margin: 0;
-    margin-left: 2.5%;
+  display: block;
+  height: 1px;
+  width: 95%;
+  margin: 0;
+  margin-left: 2.5%;
 }
 
 /deep/.el-dialog__footer {
-    margin-top: -20px;
+  margin-top: -20px;
 }
 
 .el-button {
-    width: 100px;
-    height: 30px;
-    text-align: center;
-    margin: 30px;
-    padding: 5px;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  margin: 30px;
+  padding: 5px;
 }
-</style>
+</style>

src/views/deviceManagement/messageDailog/dataImport.vue

@@ -1,118 +1,137 @@
 <template>
-    <div>
-        <el-dialog v-dialog-drag class="dialog" title="批量导入数据" :visible.sync="dialogVisible" width="25%" center>
-            <el-divider></el-divider>
-            <el-timeline>
-                <el-timeline-item>下载 Excel 模板
-                    <el-button
-                        style="width: 200px;height: 30px;text-align: center;margin:0px; margin-top: 10px;padding: 5px;"
-                        type="text">点击下载《A设备导入模板》</el-button>
-                </el-timeline-item>
-                <el-timeline-item>编辑 Excel 模板</el-timeline-item>
-                <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
-            </el-timeline>
-            <div slot="footer" class="dialog-footer">
-                <el-input v-model="input" placeholder="文件名称"></el-input>
-                <el-upload :action="action">
-                    <el-button type="primary">选择文件</el-button>
-                </el-upload>
-            </div>
-        </el-dialog>
-    </div>
+  <div>
+    <el-dialog
+      v-dialog-drag
+      class="dialog"
+      title="批量导入数据"
+      :visible.sync="dialogVisible"
+      width="25%"
+      center
+    >
+      <el-divider></el-divider>
+      <el-timeline>
+        <el-timeline-item
+          >下载 Excel 模板
+          <el-button
+            style="
+              width: 200px;
+              height: 30px;
+              text-align: center;
+              margin: 0px;
+              margin-top: 10px;
+              padding: 5px;
+              color: #2ea8e6;
+            "
+            type="text"
+            >点击下载《A设备导入模板》</el-button
+          >
+        </el-timeline-item>
+        <el-timeline-item>编辑 Excel 模板</el-timeline-item>
+        <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
+      </el-timeline>
+      <div slot="footer" class="dialog-footer">
+        <el-input v-model="input" placeholder="文件名称"></el-input>
+        <el-upload :action="action">
+          <el-button type="primary" style="background: #2ea8e6;">选择文件</el-button>
+        </el-upload>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dialogVisible: false,
-            input: '',
-            action: '',
-            steps: [{
-                content: '下载 Excel 模板',
-            }, {
-                content: '编辑 Excel 模板',
-            }, {
-                content: '上传已编辑好的 Excel 模板'
-            }]
-        }
-    },
-    methods: {
-
-    }
-
-}
+  data() {
+    return {
+      dialogVisible: false,
+      input: "",
+      action: "",
+      steps: [
+        {
+          content: "下载 Excel 模板",
+        },
+        {
+          content: "编辑 Excel 模板",
+        },
+        {
+          content: "上传已编辑好的 Excel 模板",
+        },
+      ],
+    };
+  },
+  methods: {},
+};
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-    height: 500px !important;
+  height: 500px !important;
 }
 
 /deep/.el-dialog {
-    height: 30vh;
+  height: 30vh;
 }
 
 /deep/.el-dialog__title {
-    margin-right: 330px;
+  margin-right: 330px;
 }
 
 /deep/.el-dialog__headerbtn {
-    font-size: 25px;
+  font-size: 25px;
 }
 
 /deep/.el-dialog__body {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-dialog__footer {
-    margin-top: -40px;
+  margin-top: -40px;
 }
 
 .el-timeline {
-    margin: 40px 0 0 80px;
-    list-style: none;
-    font-size: 18px;
-
-    .el-timeline-item {
-        position: relative;
-        padding-bottom: 80px;
-    }
-
-    /deep/.el-timeline-item__content {
-        display: grid;
-    }
+  margin: 40px 0 0 80px;
+  list-style: none;
+  font-size: 18px;
+
+  .el-timeline-item {
+    position: relative;
+    padding-bottom: 80px;
+  }
+
+  /deep/.el-timeline-item__content {
+    display: grid;
+  }
 }
 
 /deep/.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 95%;
-    margin: 0;
-    margin-left: 2.5%;
+  display: block;
+  height: 1px;
+  width: 95%;
+  margin: 0;
+  margin-left: 2.5%;
 }
 
 .dialog-footer {
-    display: flex;
-    margin-left: 10px;
+  display: flex;
+  margin-left: 10px;
 
-    /deep/.el-input {
-        height: 40px;
-        width: 300px;
-        margin-right: 10px;
-    }
+  /deep/.el-input {
+    height: 40px;
+    width: 300px;
+    margin-right: 10px;
+  }
 
-    /deep/.el-button {
-        margin: 0;
-        height: 40px;
-        width: 100px;
-    }
+  /deep/.el-button {
+    margin: 0;
+    height: 40px;
+    width: 100px;
+  }
 }
 
 .el-button {
-    width: 100px;
-    height: 30px;
-    text-align: center;
-    margin: 30px;
-    padding: 5px;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  margin: 30px;
+  padding: 5px;
 }
-</style>
+</style>

src/views/deviceManagement/messageDailog/deviceEdit.vue

@@ -1,189 +1,224 @@
 <template>
-    <div>
-        <el-dialog v-dialog-drag class="dialog" title="设备编辑" :visible.sync="dialogVisible" width="25%" center>
-            <el-divider></el-divider>
-            <div style="height: 470px;">
-                <el-scrollbar style="height: 100%;">
-                    <el-form ref="form" :model="form" label-position="left" label-width="75px">
-                        <el-form-item label="设备名称：" prop="name">
-                            <el-input v-model="form.name"></el-input>
-                        </el-form-item>
-                        <el-form-item label="设备ID：" prop="id">
-                            <el-input v-model="form.id"></el-input>
-                        </el-form-item>
-                        <el-form-item label="设备类别：" prop="type">
-                            <el-select v-model="form.type" placeholder="请选择">
-                                <el-option value="test"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="设备用途：" prop="use">
-                            <el-select v-model="form.use" placeholder="请选择">
-                                <el-option value="test"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="设备位置：" prop="position">
-                            <el-select v-model="form.position" placeholder="请选择">
-                                <el-option value="test"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label-width="105px" label="设备使用年限：" prop="life">
-                            <el-input class="life" v-model="form.life"></el-input>
-                        </el-form-item>
-                        <el-form-item label-width="90px" label="设备责任人：" prop="person">
-                            <el-input class="person" v-model="form.person"></el-input>
-                        </el-form-item>
-                        <el-form-item label="公司名称：" prop="corpor_name">
-                            <el-select v-model="form.corpor_name" placeholder="请选择">
-                                <el-option value="test"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="部门名称：" prop="depart_name">
-                            <el-select v-model="form.depart_name" placeholder="请选择">
-                                <el-option value="test"></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label-width="45px" label="备注：" prop="note">
-                            <el-input class="note" type="textarea" :rows="2" v-model="form.note"></el-input>
-                        </el-form-item>
-                        <el-form-item label-width="45px" style="width: 370px;" :model="form.attachment" label="附件："
-                            prop="attachment">
-                            <el-upload class="attachment" drag :action="action" multiple>
-                                <i class="el-icon-upload"></i>
-                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                                <div class="el-upload__tip" slot="tip" style="display: flex;">请上传大小不小于 <p
-                                        style="color: crimson;">5MB</p>，格式为 <P style="color: crimson;">png/jpd/jpeg</P>的文件
-                                </div>
-                            </el-upload>
-                        </el-form-item>
-                    </el-form>
-                </el-scrollbar>
-            </div>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary">下一个</el-button>
-                <el-button @click="resetForm('form')">重置</el-button>
-                <el-button type="primary" @click="submitForm('form')">确认</el-button>
-            </div>
-        </el-dialog>
-    </div>
+  <div>
+    <el-dialog
+      v-dialog-drag
+      class="dialog"
+      title="设备编辑"
+      :visible.sync="dialogVisible"
+      width="470px"
+      center
+    >
+      <el-divider></el-divider>
+      <div style="height: 470px">
+        <el-scrollbar style="height: 100%">
+          <el-form
+            ref="form"
+            :model="form"
+            label-position="left"
+            label-width="75px"
+          >
+            <el-form-item label="设备名称：" prop="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="设备ID：" prop="id">
+              <el-input v-model="form.id"></el-input>
+            </el-form-item>
+            <el-form-item label="设备类别：" prop="type">
+              <el-select v-model="form.type" placeholder="请选择">
+                <el-option value="test"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="设备用途：" prop="use">
+              <el-select v-model="form.use" placeholder="请选择">
+                <el-option value="test"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="设备位置：" prop="position">
+              <el-select v-model="form.position" placeholder="请选择">
+                <el-option value="test"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label-width="105px"
+              label="设备使用年限："
+              prop="life"
+            >
+              <el-input class="life" v-model="form.life"></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px" label="设备责任人：" prop="person">
+              <el-input class="person" v-model="form.person"></el-input>
+            </el-form-item>
+            <el-form-item label="公司名称：" prop="corpor_name">
+              <el-select v-model="form.corpor_name" placeholder="请选择">
+                <el-option value="test"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="部门名称：" prop="depart_name">
+              <el-select v-model="form.depart_name" placeholder="请选择">
+                <el-option value="test"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label-width="45px" label="备注：" prop="note">
+              <el-input
+                class="note"
+                type="textarea"
+                :rows="2"
+                v-model="form.note"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              label-width="45px"
+              style="width: 370px"
+              :model="form.attachment"
+              label="附件："
+              prop="attachment"
+            >
+              <el-upload class="attachment" drag :action="action" multiple>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
+                <div class="el-upload__tip" slot="tip" style="display: flex">
+                  请上传大小不小于
+                  <p style="color: crimson">5MB</p>
+                  ，格式为 <P style="color: crimson">png/jpd/jpeg</P>的文件
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </el-scrollbar>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" style="background: #2ea8e6">下一个</el-button>
+        <el-button
+          style="background: #b3b3b3; color: #fff"
+          @click="resetForm('form')"
+          >重置</el-button
+        >
+        <el-button
+          type="primary"
+          style="background: #2ea8e6"
+          @click="submitForm('form')"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dialogVisible: false,
-            form: {
-                name: '',
-                id: '',
-                type: '',
-                use: '',
-                position: '',
-                life: '',
-                person: '',
-                corpor_name: '',
-                depart_name: '',
-                note: '',
-                attachment: ''
-            },
-            action: ''
-        }
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        name: "",
+        id: "",
+        type: "",
+        use: "",
+        position: "",
+        life: "",
+        person: "",
+        corpor_name: "",
+        depart_name: "",
+        note: "",
+        attachment: "",
+      },
+      action: "",
+    };
+  },
+  methods: {
+    handleNodeClick() {},
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
     },
-    methods: {
-        handleNodeClick() {
-
-        },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
-        },
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    //
-                }
-            })
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //
         }
-    }
-
-}
+      });
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 /deep/.el-dialog {
-    height: 600px !important;
+  height: 600px !important;
 }
 
 .el-form {
-    .el-form-item {
-        margin: 20px 0 0 40px;
-        width: 400px;
+  .el-form-item {
+    margin: 20px 0 0 40px;
+    width: 400px;
 
-        /deep/.el-form-item__label {
-            padding: 0;
-            font-size: 15px;
-        }
+    /deep/.el-form-item__label {
+      padding: 0;
+      font-size: 15px;
+    }
 
-        /deep/.el-input__inner {
-            width: 300px;
-            height: 30px;
-        }
+    /deep/.el-input__inner {
+      width: 300px;
+      height: 30px;
+    }
 
-        .life {
-            /deep/.el-input__inner {
-                width: 270px !important;
-            }
-        }
+    .life {
+      /deep/.el-input__inner {
+        width: 270px !important;
+      }
+    }
 
-        .person {
-            /deep/.el-input__inner {
-                width: 285px !important;
-            }
-        }
+    .person {
+      /deep/.el-input__inner {
+        width: 285px !important;
+      }
+    }
 
-        .note {
-            /deep/.el-input__inner {
-                width: 330px !important;
-            }
-        }
+    .note {
+      /deep/.el-input__inner {
+        width: 330px !important;
+      }
     }
+  }
 }
 
 .dialog-footer {
-    display: flex;
+  display: flex;
 }
 
-
 /deep/.el-dialog {
-    height: 30vh;
+  height: 30vh;
 }
 
 /deep/.el-dialog__title {
-    margin-right: 330px;
+  margin-right: 330px;
 }
 
 /deep/.el-dialog__headerbtn {
-    font-size: 25px;
+  font-size: 25px;
 }
 
 /deep/.el-dialog__body {
-    padding: 0;
+  padding: 0;
 }
 
 /deep/.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 95%;
-    margin: 0;
-    margin-left: 2.5%;
+  display: block;
+  height: 1px;
+  width: 95%;
+  margin: 0;
+  margin-left: 2.5%;
 }
 
 /deep/.el-dialog__footer {
-    margin-top: -20px;
+  margin-top: -20px;
 }
 
 .el-button {
-    width: 100px;
-    height: 30px;
-    text-align: center;
-    margin: 30px;
-    padding: 5px;
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  margin: 30px;
+  padding: 5px;
 }
 </style>