From b46bc2dba51a3885a68e4c58316b41a31ea16bb2 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 14 二月 2023 13:35:03 +0800
Subject: [PATCH] 1.存货档案修改

---
 src/views/zlgl/qxdy.vue |  306 ++++++++++++++++++++++++--------------------------
 1 files changed, 149 insertions(+), 157 deletions(-)

diff --git a/src/views/zlgl/qxdy.vue b/src/views/zlgl/qxdy.vue
index 7b5ca66..b0ae1e4 100644
--- a/src/views/zlgl/qxdy.vue
+++ b/src/views/zlgl/qxdy.vue
@@ -1,13 +1,18 @@
 <template>
   <div>
     <div class="body" :style="{height:mainHeight+'px'}">
-      <div style="padding: 10px 5px 0 0">
+
+      <div class="bodyTopButtonGroup" style="justify-content: space-between">
+        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
+        <el-button v-waves icon="el-icon-download" @click="upload">瀵煎叆</el-button>
+      </div>
+      <div class="bodyTopFormGroup">
         <el-form
           ref="form"
           :model="form"
-          label-width="80px"
+          label-width="100px"
           inline
-          style="display: flex;justify-content: space-between"
+          style="display: flex;"
         >
           <div class="elForm">
             <el-form-item label="缂洪櫡浠g爜" style=" display: flex;">
@@ -21,24 +26,23 @@
               <el-input v-model="form.defectdescr" style="width: 200px" placeholder="璇疯緭鍏�" />
             </el-form-item>
           </div>
-          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
-            <el-button type="primary" icon="el-icon-search" @click="search">鏌ヨ</el-button>
-            <el-button type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button>
+          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
+            <el-button v-waves type="primary" icon="el-icon-search" @click="search">鏌ヨ</el-button>
+            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">閲嶇疆</el-button>
           </div>
         </el-form>
+        <div
+          class="bodyTopFormExpand"
+        />
       </div>
-      <el-divider />
-      <div style="margin-left: 10px;display: flex">
-        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
-        <!--        <el-button type="primary" icon="el-icon-upload2" @click="upload">瀵煎叆</el-button>-->
-      </div>
-      <el-divider />
       <div class="elTableDiv">
         <el-table
+          ref="tableDataRef"
+          class="tableFixed"
           :data="tableData"
           :height="tableHeight+'px'"
           border
-          stripe
+          :row-class-name="tableRowClassName"
           :style="{width: 100+'%',height:tableHeight+'px',}"
           highlight-current-row
           :header-cell-style="this.$headerCellStyle"
@@ -53,39 +57,57 @@
             prop="RowNum"
             width="50"
             label="搴忓彿"
+            fixed
           />
           <el-table-column
             prop="code"
             label="缂洪櫡浠g爜"
+            show-tooltip-when-overflow
             sortable="custom"
           />
           <el-table-column
             prop="name"
             label="缂洪櫡鍚嶇О"
+            show-tooltip-when-overflow
             sortable="custom"
           />
           <el-table-column
             prop="descr"
+            show-tooltip-when-overflow
             label="缂洪櫡鎻忚堪"
             sortable="custom"
-          />
+          >
+            <template slot-scope="{row}">
+              <div v-if="row.descr">{{ row.descr }}</div>
+              <div v-else>/</div>
+            </template>
+          </el-table-column>
           <el-table-column
             prop="lm_user"
             label="鍒涘缓浜哄憳"
             sortable="custom"
+            show-tooltip-when-overflow
           />
           <el-table-column
             prop="lm_date"
+            show-tooltip-when-overflow
             label="鍒涘缓鏃堕棿"
             sortable="custom"
           />
           <el-table-column
             label="鎿嶄綔"
+            fixed="right"
+            width="120"
           >
             <template slot-scope="{row}">
               <div class="operationClass">
-                <el-button type="text" @click="edit('edit',row)">缂栬緫</el-button>
-                <el-button type="text" @click="del(row)">鍒犻櫎</el-button>
+                <el-tooltip class="item" effect="dark" content="缂栬緫" placement="top">
+                  <i :style="{color:$store.state.settings.theme}" class="el-icon-edit-outline" @click="edit('edit',row)" />
+                </el-tooltip>
+                <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top">
+                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />
+                </el-tooltip>
+
               </div>
             </template>
           </el-table-column>
@@ -93,18 +115,18 @@
       </div>
       <!--鍒嗛〉-->
       <pagination
-        v-show="total>0"
         :total="total"
         :page.sync="form.page"
         :limit.sync="form.rows"
         align="right"
-        layout="prev, pager, next,sizes"
+        layout="total,prev, pager, next,sizes"
         popper-class="select_bottom"
         @pagination="getDedectSearch"
       />
     </div>
 
     <el-dialog
+      v-el-drag-dialog
       :title="operation==='add'?'鏂板':'缂栬緫'"
       :visible.sync="dialogVisible"
       width="800px"
@@ -126,36 +148,39 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <div class="footerButton">
-          <el-button @click="dialogVisibleCancel">鍙� 娑�</el-button>
-          <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
+          <el-button v-waves @click="dialogVisibleCancel">鍙� 娑�</el-button>
+          <el-button
+            v-waves
+            type="primary"
+            :loading="$store.state.app.buttonIsDisabled"
+            :disabled="$store.state.app.buttonIsDisabled"
+            @click="dialogVisibleConfirm"
+          >纭� 瀹�</el-button>
         </div>
       </span>
     </el-dialog>
+
+    <!--瀵煎叆缁勪欢-->
+    <import-picker ref="importPickerFunc" class="importPickerClass" :shows.sync="shows" :title="title_value" :colos="colos" :code="code" />
+
   </div>
 </template>
 
 <script>
 import Pagination from '@/components/Pagination'
 import { AddUpdateDedect, DedectSearch, DeleteDedect } from '@/api/zlgl'
+import ImportPicker from '@/components/ImportPicker'
+import { validateCode } from '@/utils/global'
+import elDragDialog from '@/directive/el-drag-dialog'
+import waves from '@/directive/waves'
 
-const SER_HZ = /^[\u4e00-\u9fa5]+$/
 export default {
   name: 'QXDY',
   components: {
-    Pagination
+    Pagination, ImportPicker
   },
+  directives: { elDragDialog, waves },
   data() {
-    const validateName = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error('璇疯緭鍏ョ己闄蜂唬鐮�'))
-      } else {
-        if (SER_HZ.test(value)) {
-          return callback(new Error('浠g爜涓嶈兘涓轰腑鏂�'))
-        } else {
-          callback()
-        }
-      }
-    }
     return {
       mainHeight: 0,
       tableHeight: 0,
@@ -179,11 +204,21 @@
       operation: '',
       dialogFormRules: {
         defectcode: [
-          { required: true, validator: validateName, trigger: ['blur', 'change'] }
+          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
         ],
         defectname: [
           { required: true, message: '璇疯緭鍏ョ己闄峰悕绉�', trigger: ['blur', 'change'] }
         ]
+      },
+      title_value: '鏁版嵁瀵煎叆 / 缂洪櫡瀹氫箟',
+      code: '18',
+      shows: false
+    }
+  },
+  watch: {
+    shows() {
+      if (!this.shows) {
+        this.getDedectSearch()
       }
     }
   },
@@ -217,8 +252,13 @@
     search() {
       this.getDedectSearch()
     },
+    // 瀵煎叆鎸夐挳
     upload() {
-
+      this.shows = true
+      this.$refs.importPickerFunc.newDataFunc()
+    },
+    colos() {
+      this.shows = false
     },
     // 閲嶇疆
     reset() {
@@ -253,6 +293,9 @@
         DeleteDedect({ defectcode: row.code }).then(res => {
           if (res.code === '200') {
             this.$message.success('鍒犻櫎鎴愬姛!')
+            if (this.form.page > 1 && this.tableData.length === 1) {
+              this.form.page--
+            }
             this.getDedectSearch()
           }
         })
@@ -275,6 +318,7 @@
     dialogVisibleConfirm() {
       this.$refs.dialogForm.validate(valid => {
         if (valid) {
+          this.$store.state.app.buttonIsDisabled = true
           const data = {
             defectcode: this.dialogForm.defectcode,
             defectname: this.dialogForm.defectname,
@@ -283,9 +327,10 @@
           }
           AddUpdateDedect(data).then(res => {
             if (res.code === '200') {
-              this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
               this.dialogVisible = false
+              this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
               this.getDedectSearch()
+              this.$store.state.app.buttonIsDisabled = false
             } else {
               this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�')
             }
@@ -296,40 +341,64 @@
     // 鑾峰彇椤甸潰楂樺害
     getHeight() {
       this.$nextTick(() => {
-        this.mainHeight = window.innerHeight - 250
-        this.tableHeight = this.mainHeight - 50
+        this.mainHeight = window.innerHeight - 85
+        this.tableHeight = this.mainHeight - 195
+        this.$refs.tableDataRef.doLayout()
         // if (window.innerHeight < 769) {
         //   this.tableHeight = this.tableHeight - 50
         // }
       })
+    },
+    tableRowClassName({ row, rowIndex }) {
+      return 'custom-row'
     }
   }
 }
 </script>
 
+<!--鍏叡椤甸潰鏍峰紡-->
 <style lang="scss" scoped>
 $main_color: #42b983;
-::v-deep .el-button--primary {
-  background-color: $main_color !important;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  //border: 1px solid $main_color;
-  border: none;
-  padding: 0 20px;
+.el-icon-share ,.el-icon-delete,.el-icon-edit-outline{
+  color: $main_color;
+  cursor: pointer;
 }
-::v-deep .el-button--primary:hover {
-  border: none;
-}
-::v-deep .el-button--info {
-  height: 30px;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
+.el-icon-edit-outline{
+  margin-right: 15px;
 }
 
-::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
-  background-color: $main_color !important;
+::v-deep .el-button--primary, .el-button--default, .el-button--info {
+  height: 34px;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+
+::v-deep .el-button--primary {
+  //background-color: $main_color !important;
+}
+
+::v-deep .el-button--default {
+  background-color: #f8f8fa;
+  border: none;
+}
+
+::v-deep .el-input__inner {
+  height: 34px;
+  line-height: 34px;
+  //color: #a7a7a7;
+}
+
+::v-deep .el-dialog__body {
+  padding: 20px 100px !important;
+}
+
+::v-deep .dialogVisibleRoles .el-dialog__body {
+  padding: 20px 20px !important;
+}
+
+::v-deep .importPickerClass .el-dialog__body {
+  padding: 20px 20px !important;
 }
 
 ::v-deep .el-dialog__footer {
@@ -337,105 +406,30 @@
   justify-content: flex-end;
 }
 
-.footerButton {
-  display: flex;
-  justify-content: end;
-}
-
-::v-deep .el-button--default {
-  background-color: #ffffff !important;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-}
-
-::v-deep .el-button--default:hover {
-  color: #606266;
-}
-
-::v-deep .el-dialog__body {
-  padding: 20px 100px !important;
-}
-
-::v-deep .el-radio__input.is-checked .el-radio__inner {
-  background-color: $main_color;
-  border-color: $main_color;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
-  color: $main_color !important;
-}
-
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
-  border-color: $main_color;
-  background-color: $main_color;
-}
-
-::v-deep .el-input__inner {
-  height: 30px;
-  line-height: 30px;
-}
-::v-deep .el-input__inner:focus {
-  border-color: $main_color;
-}
-
 ::v-deep .el-table .caret-wrapper {
   transform: scale(0.8);
 }
 
 ::v-deep .cell {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: space-between !important;
-}
-
-::v-deep .el-button--text {
-  color: $main_color;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.operationClass {
-  height: 23px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
-.el-icon-share {
-  color: $main_color;
-  cursor: pointer;
+::v-deep .el-table::before {
+  height: 0;
 }
 
-.el-checkbox.is-bordered.is-checked {
-  border-color: $main_color;
+::v-deep .el-table__body-wrapper {
+  background-color: #f8f8fa;
 }
 
-::v-deep .el-radio__input.is-checked .el-radio__inner {
-  border-color: $main_color;
-  background: $main_color;
+::v-deep .el-table__body .el-table__row.hover-row td{
+  background-color: #eaecef ;
 }
 
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  border-color: $main_color;
-  background: $main_color;
-}
-
-::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
-  color: $main_color !important;
-}
-
-::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
-  margin: 10px 30px 0px 0;
-}
-
-::v-deep .el-radio__input.is-checked + .el-radio__label {
-  color: $main_color;
-}
-
-::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
-  margin: 10px 30px 0px 0;
+::v-deep .el-form--inline .el-form-item__label {
+  color: #a7a7a7;
 }
 
 .body ::v-deep .el-divider {
@@ -447,23 +441,21 @@
 .body ::v-deep .el-form-item {
   margin-bottom: 0;
 }
+.userDialogVisible ::v-deep .el-form-item {
+  margin-bottom: 0;
+}
+.tableFixed{
+  ::v-deep .el-table__fixed-right{
+    height: 100% !important;
+  }
+  ::v-deep .el-table__fixed{
+    height: 100% !important;
+  }
+}
+</style>
+<style>
 
-::v-deep .el-input__inner:focus {
-  border-color: $main_color;
+.el-table .custom-row {
+  background: #f8f8fa;
 }
-
-::v-deep .el-select .el-input__inner:focus{
-  border-color: $main_color;
-}
-
-::v-deep .el-select-dropdown__item.selected{
-  color: $main_color;
-}
-::v-deep .el-checkbox__inner:hover{
-  border-color: $main_color;
-}
-::v-deep .el-textarea__inner:focus{
-  border-color: $main_color;
-}
-
 </style>

--
Gitblit v1.9.3