up

src/pages/cultural-relic/index.vue

@@ -7,105 +7,49 @@
         <div class="info-top">
           <div class="info-left">
             <span>按文物类别查看：</span>
-            <el-select
-              style="width: 100px"
-              v-model="typeId"
-              placeholder="请选择"
-            >
+            <el-select style="width: 100px" v-model="typeId" placeholder="请选择">
               <el-option label="全部" value=""></el-option>
-              <el-option
-                v-for="(item, i) in plist"
-                :key="i"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
+              <el-option v-for="(item, i) in plist" :key="i" :label="item.name" :value="item.id"></el-option>
             </el-select>
             <span style="margin-left: 20px">按文物年代查看：</span>
-            <el-select
-              style="width: 180px; text-align: center"
-              v-model="timeId"
-              placeholder="请选择"
-            >
+            <el-select style="width: 180px; text-align: center" v-model="timeId" placeholder="请选择">
               <el-option label="全部" value=""></el-option>
-              <el-option
-                v-for="(item, i) in tlist"
-                :key="i"
-                :label="item.name"
-                :value="item.id"
-              ></el-option>
+              <el-option v-for="(item, i) in tlist" :key="i" :label="item.name" :value="item.id"></el-option>
             </el-select>
-            <el-input
-              class="searInput"
-              style="width: 190px; margin: 0 20px"
-              v-model="inputKey"
-              placeholder="请输入文物名称搜索"
-              maxlength="10"
-              show-word-limit
-            ></el-input>
+            <el-input class="searInput" style="width: 190px; margin: 0 20px" v-model="inputKey" placeholder="请输入文物名称搜索"
+              maxlength="10" show-word-limit></el-input>
 
-            <el-radio v-model="sortType" :label="0" style="margin-right: 10px"
-              >按默认排序</el-radio
-            >
+            <el-radio v-model="sortType" :label="0" style="margin-right: 10px">按默认排序</el-radio>
             <el-radio v-model="sortType" :label="1">按总浏览量排序</el-radio>
 
             <el-button type="primary" @click="getInformation">查找</el-button>
             <el-button @click="inputKey = ''">重置</el-button>
-            <el-select
-              style="margin-left: 20px"
-              @change="piliang"
-              :value="'批量导入 '"
-              placeholder="请选择"
-              v-if="0"
-            >
+            <el-select style="margin-left: 20px" @change="piliang" :value="'批量导入 '" placeholder="请选择" v-if="0">
               <el-option label="模板下载" value="模板下载"> </el-option>
               <el-option label="批量导入" value="批量导入"> </el-option>
             </el-select>
-            <input
-              @change="uploadChange"
-              class="upload-btn"
-              ref="upload"
-              type="file"
-            />
+            <input @change="uploadChange" class="upload-btn" ref="upload" type="file" />
           </div>
           <div class="info-right">
-            <JsonExcel
-              style="display: inline-block;"
-              :before-generate="derive"
-              class="export-excel-wrapper"
-              :data="json_data"
-              :fields="json_fields"
-              :name="`文物清单.xls`"
-            >
+            <JsonExcel style="display: inline-block;" :before-generate="derive" class="export-excel-wrapper"
+              :data="json_data" :fields="json_fields" :name="`文物清单.xls`">
               <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
               <el-button type="primary">导出文物</el-button>
             </JsonExcel>
 
-            <el-button
-              type="primary"
-              @click="
-                $router.push({
-                  name: 'edit-cultural-relic',
-                  params: { type: 0 },
-                })
-              "
-              >新增文物</el-button
-            >
+            <el-button type="primary" @click="
+              $router.push({
+                name: 'edit-cultural-relic',
+                params: { type: 0 },
+              })
+            ">新增文物</el-button>
           </div>
         </div>
         <div class="collection-con">
           <ul>
-            <li
-              class="theme-color"
-              @click="gotoShow(item)"
-              v-for="(item, i) in tableData"
-              :key="i"
-            >
+            <li class="theme-color" @click="gotoShow(item)" v-for="(item, i) in tableData" :key="i">
               <div class="li-img">
-                <el-image
-                  :fit="'cover'"
-                  style="width: 100%; height: 100%"
-                  :src="item.pic"
-                ></el-image>
+                <el-image :fit="'cover'" style="width: 100%; height: 100%" :src="item.pic"></el-image>
                 <!-- <div class="liulan"><span>浏览量: {{Math.round(Math.random()*100000)}}</span> 点赞数: {{Math.round(Math.random()*1000)}}</div> -->
               </div>
               <div class="txtTim">
@@ -114,11 +58,8 @@
                 </div>
                 <div class="txtTimRight">
                   <span class="el-icon-view"></span>
-                  <i> {{item.openNum}}</i>
-                  <span
-                    @click.stop="del(item)"
-                    class="del el-icon-delete"
-                  ></span>
+                  <i> {{ item.openNum }}</i>
+                  <span @click.stop="del(item)" class="del el-icon-delete"></span>
                 </div>
               </div>
               <p>{{ item.name }}</p>
@@ -126,13 +67,8 @@
           </ul>
         </div>
         <div class="e-pagination">
-          <el-pagination
-            @current-change="handleCurrentChange"
-            :current-page.sync="currentPage"
-            :page-size="size"
-            layout="prev, pager, next, jumper"
-            :total="total"
-          ></el-pagination>
+          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size"
+            layout="prev, pager, next, jumper" :total="total"></el-pagination>
         </div>
       </div>
     </div>
@@ -191,7 +127,8 @@ export default {
             ' value ': ' utf- 8 '
           }
         ]
-      ]
+      ],
+      inputTime: null
     }
   },
   watch: {
@@ -202,7 +139,10 @@ export default {
       this.refresh()
     },
     inputKey () {
-      this.refresh()
+      clearTimeout(this.inputTime)
+      this.inputTime = setTimeout(() => {
+        this.refresh()
+      }, 500)
     },
     sortType () {
       this.refresh()

src/pages/editPages/cultural-relic/index.vue

@@ -11,8 +11,8 @@
         <div class="top-title">文物信息:</div>
         <div class="form-con">
           <el-form ref="form"  :rules="rules" status-icon  :model="form" label-width="120px">
-            <el-form-item prop="name" label="文物名称：" style="width:318px;">
-              <el-input v-model="form.name" placeholder="请输入文物名称"></el-input>
+            <el-form-item prop="name" label="文物名称：" style="width:330px;">
+              <el-input v-model="form.name" placeholder="请输入文物名称" class="nameInput"></el-input>
             </el-form-item>
             <el-form-item prop="verticalName" label="竖排文物名" v-if="0">
               <el-input type="textarea" v-model="form.verticalName" class="verticla-input" />

src/pages/editPages/cultural-relic/style.css

@@ -0,0 +1,51 @@
+.top-body {
+  border-top: 0.0625rem solid #e6e6e6;
+  line-height: 1.5;
+  padding: 1.25rem;
+  align-items: center;
+  box-sizing: border-box;
+  background: #fff;
+  margin: 1rem 0;
+}
+.nameInput /deep/ .el-input__inner {
+  padding-right: 40px;
+}
+.table-interface {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 3rem);
+}
+.top-body .top-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+.form-con {
+  width: 85%;
+  border: 1px solid #e5e5e5;
+  padding: 2% 10% 2% 2%;
+  margin-bottom: 20px;
+}
+.banshi {
+  line-height: 1;
+  font-size: 0;
+}
+.banshi > div {
+  display: flex;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+.banshi > div > div {
+  width: 19%;
+  border: 1px solid #ccc;
+  min-height: 100px;
+  margin-right: 4px;
+  margin-bottom: 20px;
+}
+.banshi > div > div > img {
+  cursor: pointer;
+  width: 100%;
+}
+.banshi > div > div:last-of-type {
+  margin-right: 0;
+}

src/pages/editPages/cultural-relic/style.less

@@ -9,7 +9,11 @@
 }
 
 
-
+.nameInput{
+  /deep/.el-input__inner{
+    padding-right: 40px;
+  }
+}
 .table-interface{
   overflow-y: auto;
   overflow-x: hidden;

src/pages/user/index.vue

@@ -403,6 +403,10 @@ export default {
       if (type === 'edit') {
         this.form = item
       }
+
+      setTimeout(() => {
+        this.$refs.form.resetFields()
+      }, 20)
     },
     changeState (item) {
       let state = item.state === 1 ? 0 : 1