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/zzmx/gylx.vue | 1368 ++++++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 931 insertions(+), 437 deletions(-)

diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index deca4b5..f733d87 100644
--- a/src/views/zzmx/gylx.vue
+++ b/src/views/zzmx/gylx.vue
@@ -1,521 +1,1015 @@
 <template>
   <div>
-    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">
-      <div style="margin-bottom: 20px;">
+    <div class="body" :style="{height:mainHeight+'px'}">
+
+      <div class="bodyTopButtonGroup">
+        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
+        <!--        <el-button v-waves type="primary" icon="el-icon-upload2" @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 style="display: flex;justify-content: space-around;width: 85%">
-            <el-form-item label="鍏泭璺嚎">
-              <el-input v-model="form.gylx" placeholder="璇疯緭鍏�" />
+          <div class="elForm">
+            <el-form-item label="宸ヨ壓璺嚎缂栫爜" style=" display: flex;">
+              <el-input v-model="form.routecode" placeholder="璇疯緭鍏�" style="width: 200px" />
             </el-form-item>
-            <el-form-item label="鐗╂枡缂栫爜">
-              <el-input v-model="form.wlbm" placeholder="璇疯緭鍏�" />
+            <el-form-item label="宸ヨ壓鍚嶇О" style=" display: flex;">
+              <el-input v-model="form.routename" placeholder="璇疯緭鍏�" style="width: 200px" />
             </el-form-item>
-            <el-form-item label="鐗╂枡鍚嶇О">
-              <el-input v-model="form.wlmc" placeholder="璇疯緭鍏�" />
+            <el-form-item label="宸ヨ壓鎻忚堪" style=" display: flex;">
+              <el-input v-model="form.description" placeholder="璇疯緭鍏�" style="width: 200px" />
+            </el-form-item>
+            <el-form-item label="鍒涘缓浜哄憳" style=" display: flex;">
+              <el-input v-model="form.createuser" style="width: 200px" placeholder="璇疯緭鍏�" />
             </el-form-item>
           </div>
-          <div style="display: flex;">
-            <el-button type="primary" icon="el-icon-search" @click="search">鏌ヨ</el-button>
-            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @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 style="display: flex;justify-content: space-between">
-
-          <div style="display:flex;">
-            <el-button type="primary" icon="el-icon-circle-plus-outline">鏂板</el-button>
-            <el-button type="primary" icon="el-icon-delete">淇敼</el-button>
-            <el-button type="primary" icon="el-icon-delete">鍒犻櫎</el-button>
-            <el-button type="primary" icon="el-icon-upload2" @click="upLoad">瀵煎叆</el-button>
-            <el-button type="primary" icon="el-icon-download" @click="downLoad">瀵煎嚭</el-button>
-          </div>
-
-          <div style="display: flex;justify-content: end;margin-right: 20px">
-            <el-button type="text" icon="el-icon-document">鏌ョ湅鎴戠殑宸ヤ綔鏃ュ織</el-button>
-          </div>
-
-        </div>
+        <div
+          class="bodyTopFormExpand"
+        />
       </div>
-      <div style="display: flex;width: 100%;">
-        <div>
-          <el-table
-            :data="tableData1"
-            style="width: 100%;border: 1px solid #eee"
-            :header-cell-style="headerCellStyle"
-            :header-row-style="headerRowStyle"
-            :cell-style="cellStyle"
-          >
-            <el-table-column type="selection">
-              <!--              <template slot-scope="{row}">-->
 
-              <!--                &lt;!&ndash;                {{ row.isSelect }}&ndash;&gt;-->
-
-              <!--                &lt;!&ndash;                <el-radio :key="row.id" v-model="row.id" @change="radioValueChange($event)" />&ndash;&gt;-->
-              <!--              </template>-->
-            </el-table-column>
-            <el-table-column label="宸ヨ壓璺嚎" prop="gylx" />
-            <el-table-column label="鐗╂枡缂栫爜" prop="wlbm" />
-            <el-table-column label="鐗╂枡鍚嶇О" prop="wlmc" />
-            <el-table-column label="鐗╂枡瑙勬牸" prop="wlgg" />
-            <el-table-column label="缁撴潫瑁呯" prop="jszx">
-              <template slot-scope="{row}">
-                <div v-if="row.jszx==='1'">鏄�</div>
-                <div v-if="row.jszx==='0'">鍚�</div>
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--鍒嗛〉-->
-          <pagination
-            v-show="total>0"
-            :total="total"
-            :page.sync="form.pageNum"
-            :limit.sync="form.pageSize"
-            align="right"
-            layout="prev, pager, next,sizes"
-            popper-class="select_bottom"
-            style="padding: 0;margin-top: 10px;"
+      <div class="elTableDiv">
+        <el-table
+          ref="tableDataRef"
+          class="tableFixed"
+          :data="tableData"
+          :height="tableHeight"
+          border
+          :row-class-name="tableRowClassName"
+          :style="{width: 100+'%',height:tableHeight+'px',}"
+          highlight-current-row
+          :header-cell-style="this.$headerCellStyle"
+          :cell-style="this.$cellStyle"
+          @sort-change="sortChange"
+        >
+          <!--          <el-table-column-->
+          <!--            type="selection"-->
+          <!--            width="50"-->
+          <!--          />-->
+          <el-table-column
+            prop="RowNum"
+            width="50"
+            label="搴忓彿"
+            fixed
           />
-        </div>
-        <div style="margin:0 20px;width: 71%;">
-          <el-table
-            :data="tableData2"
-            border
-            height="500px"
-            style="width: 100%;"
-            :header-cell-style="headerCellStyle"
-            :cell-style="cellStyle"
+          <el-table-column
+            prop="code"
+            label="缂栫爜"
+            show-tooltip-when-overflow
+            sortable="custom"
+          />
+          <el-table-column
+            prop="name"
+            show-tooltip-when-overflow
+            label="鍚嶇О"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="description"
+            label="宸ヨ壓璺嚎鎻忚堪"
+            sortable="custom"
+            show-tooltip-when-overflow
           >
-            <el-table-column label="" prop="" type="index" />
-            <el-table-column label="宸ュ簭缂栫爜" prop="gxbm" />
-            <el-table-column label="宸ュ簭鍚嶇О" prop="gxmc" />
-            <el-table-column label="宸ュ簭妫�楠�" prop="gxjy" />
-            <el-table-column label="鍒濆鑺傛媿" prop="csjp" />
-            <el-table-column label="鍒濆鍨嬭厰鏁�" prop="csxqs" />
-            <el-table-column label="鍒濆宸ヤ环" prop="csgj">
-              <template slot-scope="{row}">
-                <div>{{ row.csgj }}鍏�</div>
-              </template>
-            </el-table-column>
-            <el-table-column label="缂栬緫鎿嶄綔">
-              <template slot-scope="{row}">
-                <el-tooltip content="鏂板" placement="top">
-                  <el-button type="text" icon="el-icon-circle-plus-outline" />
+            <template slot-scope="{row}">
+              <div v-if="row.description">{{ row.description }}</div>
+              <div v-else>/</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="enable"
+            show-tooltip-when-overflow
+            label="浣跨敤鐘舵��"
+            sortable="custom"
+          >
+            <template slot-scope="{row}">
+              <div v-if="row.enable==='Y'">
+                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
+                鏄�
+              </div>
+              <div v-if="row.enable==='N'">
+                <i class="el-icon-info" style="margin-right: 2px" />
+                鍚�
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="lm_user"
+            show-tooltip-when-overflow
+            label="鍒涘缓浜哄憳"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="lm_date"
+            label="鍒涘缓鏃堕棿"
+            show-tooltip-when-overflow
+            sortable="custom"
+            width="160"
+          />
+          <el-table-column
+            label="鎿嶄綔"
+            width="120"
+            fixed="right"
+          >
+            <template slot-scope="{row}">
+              <div class="operationClass">
+                <el-tooltip class="item" effect="dark" content="棰勮" placement="top">
+                  <i
+                    class="el-icon-view"
+                    :style="{color:$store.state.settings.theme}"
+                    style="margin-right:15px;cursor: pointer;"
+                    @click="edit('edit',row)"
+                  />
                 </el-tooltip>
-                <el-tooltip content="淇敼" placement="top">
-                  <el-button type="text" icon="el-icon-edit" />
+                <el-tooltip v-del-tab-index class="item" effect="dark" content="鍒犻櫎" placement="top">
+                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" style="margin-right:15px;" @click="del(row)" />
                 </el-tooltip>
-                <el-tooltip content="鍒犻櫎" placement="top">
-                  <el-button type="text" icon="el-icon-delete" />
+                <el-tooltip v-del-tab-index class="item" effect="dark" content="澶嶅埗" placement="top">
+                  <i :style="{color:$store.state.settings.theme}" class="el-icon-document-copy" style="cursor: pointer;color:#42b983" @click="copy('copy',row)" />
                 </el-tooltip>
-              </template>
-            </el-table-column>
-            <el-table-column label="鍏宠仈宸ヤ綔绔�">
-              <template slot-scope="{row}">
-                <el-tooltip content="宸ヤ綔绔�" placement="top">
-                  <el-button type="text" icon="el-icon-share" @click="shareClick(row)" />
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <div style="height: 100px;border: 1px solid #eee; margin-top: 20px">
-            <div style="margin: 20px;color:#42b983;">宸ヨ壓璺嚎</div>
-            <div>
-              <el-steps
-                style="display:flex;
-              margin-top: -25px;
-                justify-content: center;"
-                :space="400"
-                :active="3"
-                align-center
-              >
-
-                <el-step title="涓嬫枡" />
-                <el-step title="鐢靛寲瀛�" />
-                <el-step title="娓呮礂鐑樺共" />
-              </el-steps>
-            </div>
-          </div>
-        </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
-      <el-dialog
-        title="鍏宠仈宸ヤ綔绔�"
-        :visible.sync="dialogVisible"
-        width="50%"
-        top="5vh"
-        @closed="handleClose"
-      >
-        <el-divider />
-        <div style="margin-bottom: 10px;">
-          <i class="el-icon-s-comment" style="color:#42b983;" /> 宸ュ簭鍚嶇О锛歿{ dialogGxmc }}
-        </div>
-        <div>
-          <!--        <template>-->
-          <el-radio-group v-model="dialogRadioValue" @change="dialogRadioChange($event)">
-            <el-radio
-              v-for="item in dialogContentArr"
-              :key="item.id"
-
-              :label="item.name"
-              border
-              size="medium"
-            />
-            <!--            v-model="item.id"-->
-          </el-radio-group>
-          <!--        </template>-->
-        </div>
-        <div style="height: 350px;border: 1px solid #eee; margin-top: 20px;overflow-y:scroll">
-          <el-tree
-            ref="tree"
-            style="margin-left: 10px;"
-            :data="treeData"
-            show-checkbox
-            default-expand-all
-            node-key="id"
-            highlight-current
-            @node-click="nodeClick"
-          >
-            <!--          :props="defaultProps"-->
-
-            <div slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 80%;">
-              <div>{{ node.label.split('&')[0] }}</div>
-              <div>{{ node.label.split('&')[1] }}</div>
-            </div>
-
-          </el-tree>
-        </div>
-
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisibleCancel">鍙� 娑�</el-button>
-          <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
-        </span>
-      </el-dialog>
+      <!--鍒嗛〉-->
+      <pagination
+        :total="total"
+        :page.sync="form.page"
+        :limit.sync="form.rows"
+        align="right"
+        layout="total,prev, pager, next,sizes"
+        popper-class="select_bottom"
+        @pagination="getRouteSearch"
+      />
     </div>
 
+    <el-dialog
+      v-el-drag-dialog
+      :title="operation==='add'?'鏂板':(operation==='edit'?'棰勮':'澶嶅埗')"
+      :visible.sync="dialogVisible"
+      width="1000px"
+      :close-on-click-modal="false"
+      :top="isIpad?'5vh':'15vh'"
+      @closed="handleClose"
+      @close="handleClose"
+    >
+      <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">
+        <div style="display: flex">
+          <el-form-item label="宸ヨ壓璺嚎缂栫爜" prop="code" style="margin-right: 20px">
+            <el-input v-model="dialogForm.code" :disabled="operation==='edit'" style="width: 220px" />
+          </el-form-item>
+          <el-form-item label="宸ヨ壓鍚嶇О" prop="name">
+            <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item prop="enable" label="浣跨敤鐘舵��" style="margin-right: 20px">
+            <el-select
+              v-model="dialogForm.enable"
+              filterable
+              :disabled="operation==='edit'"
+              :popper-append-to-body="false"
+              style="width: 220px"
+              placeholder="璇烽�夋嫨"
+            >
+              <el-option
+                v-for="item in isEnableArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="宸ヨ壓鎻忚堪" prop="description">
+            <el-input
+              v-model="dialogForm.description"
+              :disabled="operation==='edit'"
+              type="textarea"
+              style="width: 220px"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="宸ヨ壓璁剧疆" prop="Data" style="margin-top: 30px">
+          <div class="settingDiv">
+            <!--   瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔�-->
+            <div v-for="(tag,index) in dynamicTags" :key="tag.seq" style="display: flex;align-items: center">
+              <div style="display: flex;align-items: center;position: relative;">
+                <div
+                  class="orderNumber"
+                  :style="{
+                    backgroundColor:index===0?'#f8f8fa':'#409EFF',
+                    color:index===0?'#c6bbc4':'#FFFFFF',
+                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',
+                    zIndex:tag.label===selectedName?0:2
+                  }"
+                >
+                  {{ index + 1 }}
+                </div>
+
+                <!--                <el-tooltip-->
+                <!--                  class="item"-->
+                <!--                  effect="dark"-->
+                <!--                  :content="tag.stepname"-->
+                <!--                  placement="top"-->
+                <!--                >-->
+                <!--                  @close="handleTagClose(tag.stepname)"-->
+                <!--                  :closable="index!==0"-->
+
+                <el-tag
+                  v-if="tag.stepname!==selectedName"
+                  :disable-transitions="false"
+                  class="elTag"
+                  :effect="tag.effect"
+                  @click="elTagClick(tag)"
+                >
+                  {{ tag.stepname }}
+                  <i
+                    v-if="tag.editDisabled&&operation!=='edit'"
+                    class="el-icon-edit"
+                    @click="tagEdit(tag)"
+                  />
+                </el-tag>
+                <!--                </el-tooltip>-->
+                <!--                {{ tag.editDisabled }}-->
+                <!--                left:tag.stepname===selectedName?'191px':'141px',-->
+                <i
+                  v-if="index!==0&&tag.editDisabled&&operation!=='edit'"
+                  :style="{
+                    top:tag.stepname===selectedName?'-2px':'-8px',
+                  }"
+                  class="el-icon-close"
+                  @click="handleTagClose(tag)"
+                />
+                <el-autocomplete
+                  v-if="tag.stepname===selectedName"
+                  :ref="'saveTagInput'+tag.seq"
+                  v-model="autocompleteValue"
+                  class="input-new-tag"
+                  size="small"
+                  :fetch-suggestions="querySearch"
+                  style="margin-left: 0;width: 150px;transform: translate(1)"
+                  autofocus
+                  :debounce="300"
+                  :popper-append-to-body="false"
+                  popper-class="autocompleteClass"
+                  @select="val=>handleSelect(val,tag)"
+                  @keyup.enter.native="handleInputConfirm(tag)"
+                />
+                <!--                @keyup.enter.native="handleInputConfirm(tag)"-->
+
+                <!--        @blur="handleBlur2"-->
+                <div
+                  v-if="index!==dynamicTags.length-1"
+                  style="width: 40px;height: 1px;border: 1px solid #42b983"
+                />
+              </div>
+            </div>
+
+            <el-button
+              v-if="operation!=='edit'"
+              v-waves
+              type="success"
+              :disabled="addDisabled"
+              class="tagSuccess"
+              size="small"
+              icon="el-icon-plus"
+              @click="showInput"
+            />
+
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <div class="footerButton">
+          <el-button v-if="operation==='edit'" v-waves @click="dialogVisibleCancel">杩� 鍥�</el-button>
+          <el-button v-if="operation!=='edit'" v-waves @click="dialogVisibleCancel">鍙� 娑�</el-button>
+          <el-button
+            v-if="operation!=='edit'"
+            v-waves
+            type="primary"
+            :loading="$store.state.app.buttonIsDisabled"
+            :disabled="$store.state.app.buttonIsDisabled"
+            @click="dialogVisibleConfirm"
+          >纭� 瀹�</el-button>
+        </div>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-
 import Pagination from '@/components/Pagination'
+import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/zzmx'
+import { validateCode } from '@/utils/global'
+import elDragDialog from '@/directive/el-drag-dialog'
+import waves from '@/directive/waves'
 
 export default {
-  name: 'Gylx',
+  name: 'GYLX',
   components: {
     Pagination
   },
+  directives: { elDragDialog, waves },
   data() {
     return {
+      isIpad: false,
+      mainHeight: 0,
+      tableHeight: 0,
       form: {
-        pageNum: 1, // 绗嚑椤�
-        pageSize: 10, // 姣忛〉澶氬皯鏉�
-        gylx: '', // 鍏泭璺嚎
-        wlbm: '', // 鐗╂枡缂栫爜
-        wlmc: ''// 鐗╂枡鍚嶇О
+        routecode: '', // 宸ヨ壓璺嚎缂栫爜
+        routename: '', // 宸ヨ壓璺嚎鍚嶇О
+        description: '', // 宸ヨ壓璺嚎鎻忚堪
+        createuser: '', // 鍒涘缓浜哄憳
+        prop: 'lm_date', // 鎺掑簭瀛楁
+        order: 'desc', // 鎺掑簭瀛楁
+        page: 1, // 绗嚑椤�
+        rows: 20 // 姣忛〉澶氬皯鏉�
       },
+      isEnableArr: [
+        { label: '鏄�', value: 'Y' },
+        { label: '鍚�', value: 'N' }
+      ],
       total: 10,
-      tableData1: [
-        { id: 1, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '鍦嗛挗F45MnVS20', wlgg: '20', jszx: '1' },
-        { id: 2, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '鍦嗛挗F45MnVS20', wlgg: '20', jszx: '1' },
-        { id: 3, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '鍦嗛挗F45MnVS20', wlgg: '20', jszx: '1' },
-        { id: 4, isSelect: true, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676绔欢', wlgg: '676', jszx: '1' },
-        { id: 5, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676绔欢', wlgg: '676', jszx: '1' },
-        { id: 6, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
-        { id: 7, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
-        { id: 8, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
-        { id: 9, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
-        { id: 10, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' }
-      ],
-      radioValue: '',
-      radioValueId: 0,
-      tableData2: [
-        { id: 1, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' },
-        { id: 2, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' },
-        { id: 3, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' },
-        { id: 4, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' },
-        { id: 5, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' },
-        { id: 6, gxbm: 'G0000', gxmc: '涓嬫枡', gxjy: 'N', csjp: '10绉�', csxqs: '1', csgj: '1' }
-      ],
+      tableData: [],
       dialogVisible: false,
-      dialogGxmc: '',
-      dialogContentArr: [
-        { id: 1, name: '鏈哄姞C41' },
-        { id: 2, name: '鏈哄姞C42' },
-        { id: 3, name: '鏈哄姞C43' },
-        { id: 4, name: '鏈哄姞C44' },
-        { id: 5, name: '鏈哄姞C45' },
-        { id: 6, name: '鏈哄姞C46' },
-        { id: 8, name: '鏈哄姞C47' },
-        { id: 9, name: '鏈哄姞C48' },
-        { id: 10, name: '鏈哄姞C49' },
-        { id: 11, name: '鏈哄姞C50' },
-        { id: 12, name: '鏈哄姞C51' },
-        { id: 13, name: 'GP12澶栬鍖呰C39' },
-        { id: 14, name: 'Gp12澶栬妫�娓呮礂鐑樺共鍖呰C40' },
-        { id: 15, name: 'GP12澶栬鍖呰C38' },
-        { id: 16, name: 'GP12澶栬鍖呰C37' },
-        { id: 17, name: 'GP12澶栬鍖呰C36' },
-        { id: 18, name: '杩斿洖杩斾慨杞﹂棿' },
-        { id: 19, name: '璁剧疆浼戦棽鍖�' },
-        { id: 20, name: '绌哄帇鏈烘埧' }
-      ],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
+      dialogForm: {
+        id: '',
+        code: '',
+        name: '',
+        enable: 'Y',
+        description: '',
+        Data: []
       },
-      treeData: [
-        {
-          id: 1,
-          label: '閫夋嫨鍏ㄩ儴',
-          children: [
-            {
-              id: 2,
-              label: '浜岀骇 1-1',
-              children: [{
-                id: 3,
-                label: '涓夌骇 1-1-1&LKFDL_SC-PC028'
-              }, {
-                id: 4,
-                label: '涓夌骇 1-1-2&LKFDL_SC-PC029'
-
-              }, {
-                id: 5,
-                label: '涓夌骇 1-1-1&LKFDL_SC-PC030'
-              }, {
-                id: 6,
-                label: '涓夌骇 1-1-2&LKFDL_SC-PC031'
-
-              }]
-            },
-            {
-              id: 7,
-              label: '浜岀骇 1-1',
-              children: [{
-                id: 8,
-                label: '涓夌骇 2-1-1&LKFDL_SC-PC028'
-              }, {
-                id: 9,
-                label: '涓夌骇 2-1-1&LKFDL_SC-PC029'
-
-              }, {
-                id: 10,
-                label: '涓夌骇 2-1-1&LKFDL_SC-PC027'
-              }, {
-                id: 11,
-                label: '涓夌骇 2-1-1&LKFDL_SC-PC026'
-
-              }
-              ]
-            },
-            {
-              id: 12,
-              label: '浜岀骇 1-1',
-              children: [{
-                id: 13,
-                label: '涓夌骇 3-1-1&LKFDL_SC-PC023'
-              }, {
-                id: 14,
-                label: '涓夌骇 3-1-1&LKFDL_SC-PC024'
-
-              }, {
-                id: 15,
-                label: '涓夌骇 3-1-1&LKFDL_SC-PC025'
-              }, {
-                id: 16,
-                label: '涓夌骇 3-1-1&LKFDL_SC-PC026'
-              }
-              ]
-            }
-          ]
-        }
-
+      dynamicTags: [// 宸ヨ壓璁剧疆鏁扮粍
+        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
+        // { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '濂�', effect: 'light' },
+        // { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '澶�', effect: 'light' }
       ],
-      dialogRadioValue: '',
-      dialogRadioValueId: 0
+      clickSelected: '', // 榧犳爣鐐瑰嚮閫変腑鐨勫��
+      selectedName: '', // 閫変腑鐨勫悕绉�
+      autocompleteValue: '', // 鍙悳绱㈣緭鍏ユ涓殑鍊�
+      routeArr: [], // 宸ヨ壓璁剧疆涓嬫媺鎵�鏈夊��
+      routeSelectedArr: [], // 宸ヨ壓璁剧疆涓嬫媺宸查�夌殑鍊�
+      addDisabled: true, // 娣诲姞鎸夐挳鏄惁鍙偣鍑�
+      // editDisabled: true, // 淇敼鎸夐挳鏄惁鍙偣鍑�
+      mouseFocusPosition: 0, // 榧犳爣鑱氱劍鐨勪綅缃�
+      operation: '',
+      dialogFormRules: {
+        code: [
+          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
+        ],
+        name: [
+          { required: true, message: '璇疯緭鍏ュ悕绉�', trigger: ['blur', 'change'] }
+        ],
+        enable: [
+          { required: true, message: '璇烽�夋嫨浣跨敤鐘舵��', trigger: ['blur', 'change'] }
+        ]
+        // Data: [
+        //   { required: true, message: '璇疯缃伐鑹�', trigger: ['blur', 'change'] }
+        // ]
+      }
+
     }
   },
   created() {
+    this.getRouteSearch()
+  },
+  mounted() {
+    window.addEventListener('resize', this.getHeight)
+    this.getHeight()
   },
   methods: {
-    // 瀵煎叆
-    upLoad() {
-      // const isLt100M = param.file.size / 1024 / 1024 < 50
-      // if (!isLt100M) {
-      //   this.$message('璇锋鏌ワ紝涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃50MB!')
-      //   return
-      // }
-      // const formData = new FormData()
-      // formData.append('file', param.file)
-      // formData.append('formId', this.formId)
-      //
-      // this.loading = true
-      // const _self = this
-      // uploadTable(formData).then(res => {
-      //   this.$message(res.data.message)
-      //   param.data.fbsl = res.data.data.total
-      //   _self.loading = false
-      //   this.dataList = JSON.parse(JSON.stringify(this.dataList))
-      // }).catch(() => {
-      //   _self.loading = false
-      // })
+    // 杩滅▼鎼滅储
+    querySearch(queryString, cb) {
+      const routeArr = this.routeArr
+      routeArr.forEach(item => {
+        item.value = item.stepname
+      })
+      const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr
+      // 璋冪敤 callback 杩斿洖寤鸿鍒楄〃鐨勬暟鎹�
+      cb(results)
     },
-    // 瀵煎嚭
-    async  downLoad() {
-      // const res = await downFile(row.id)
-      // if (res) {
-      //   // console.log(res)
-      //   const fileName = row.filename
-      //   // const fileName = '鏉窞甯傛瀵熷伐浣滅哗鏁堣瘎浠凤紙琛ㄤ竴锛�' + '.xls'
-      //   // let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) // xlsx
-      //   // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // xls
-      //   const blob = new Blob([res.data], { type: res.data.type }) // xls
-      //   if ('download' in document.createElement('a')) { // 闈濱E涓嬭浇
-      //     const elink = document.createElement('a')
-      //     elink.download = fileName
-      //     elink.style.display = 'none'
-      //     elink.href = URL.createObjectURL(blob)
-      //     document.body.appendChild(elink)
-      //     elink.click()
-      //     URL.revokeObjectURL(elink.href) // 閲婃斁URL 瀵硅薄
-      //     document.body.removeChild(elink)
-      //   } else { // IE10+涓嬭浇
-      //     navigator.msSaveBlob(blob, fileName)
-      //   }
-      // }
+    // 杩囨护
+    createFilter(queryString) {
+      return (res) => {
+        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
+      }
     },
-    radioValueChange(val) {
-      console.log(val)
+    // 宸ヨ壓璁剧疆 涓嬫媺鑾峰彇鎵�鏈�
+    async getStepSelectArr() {
+      const { data: res } = await StepSelect()
+      this.routeArr = res
+    },
+    // 澶勭悊涓嬫媺閫夋嫨
+    handleSelect(item, tag) {
+      this.autocompleteValue = item.value
+      this.$nextTick(_ => {
+        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
+        this.handleInputConfirm(tag)
+      })
+    },
+    // 杈撳叆妗嗙‘璁や簨浠�
+    handleInputConfirm(tag) {
+      // 1.閫夋嫨鍐呭涓嶈兘涓虹┖
+      if (this.autocompleteValue.trim().length < 1) {
+        return this.$message.info('閫夋嫨鍐呭涓嶈兘涓虹┖锛�')
+      }
+      // 2.杈撳叆妗嗗唴瀹逛笌涓嬫媺閫夐」鍐呭涓嶅尮閰�
+      let flag = false
+      this.routeArr.forEach(item => {
+        if (item.stepname === this.autocompleteValue) {
+          flag = true
+        }
+      })
+      if (!flag) {
+        return this.$message.info('杈撳叆妗嗗唴瀹逛笌涓嬫媺閫夐」鍐呭涓嶅尮閰嶏紒')
+      }
+
+      // 3.杈撳叆妗嗗唴瀹逛笌宸查�夊唴瀹圭浉鍚屾椂涓嶈兘淇濆瓨
+      let flag2 = false
+      this.dynamicTags.forEach(item => {
+        if (item.stepname === this.autocompleteValue.trim()) {
+          flag2 = true
+        }
+      })
+      if (tag.stepname === this.autocompleteValue.trim()) {
+        flag2 = false
+      }
+      if (flag2) {
+        return this.$message.info('姝ゅ伐搴忓凡閫夛紝璇烽�夋嫨鍏跺畠宸ュ簭锛�')
+      }
+
+      this.routeArr.forEach((item, index) => {
+        if (this.autocompleteValue.trim() === item.stepname) {
+          this.routeSelectedArr.push({
+            stepcode: item.stepcode,
+            stepname: item.stepname,
+            value: item.value
+          })
+
+          this.routeArr.splice(index, 1)
+        }
+      })
+
+      // 灏嗗�兼浛鎹㈠埌鍘焧ag浣嶇疆涓�
+      this.dynamicTags.forEach((item, index) => {
+        if ((index + 1) === tag.seq) {
+          item.stepname = this.autocompleteValue
+          item.effect = 'dark'
+        }
+        item.editDisabled = true
+      })
+      this.clickSelected = this.dynamicTags.findIndex(i => i.effect === 'dark') + 1
+
+      this.addDisabled = false
+      this.editDisabled = true
+      this.selectedName = ''
+    },
+    // tag鐐瑰嚮淇敼鎸夐挳
+    tagEdit(tag) {
+      this.autocompleteValue = ''
+      this.dynamicTags.forEach(item => {
+        item.stepname = item.stepname.trim()
+        item.editDisabled = false
+        if (item.seq !== tag.seq) {
+          item.effect = 'light'
+        } else {
+          item.effect = 'dark'
+        }
+      })
+
+      if (tag.stepname !== '') {
+        const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)
+
+        this.routeArr.push(
+          {
+            stepcode: routeSelectedArr.stepcode,
+            stepname: routeSelectedArr.stepname,
+            value: routeSelectedArr.value
+          }
+        )
+      }
+
+      this.addDisabled = true
+      this.selectedName = tag.stepname
+      this.autocompleteValue = tag.stepname
+      this.$nextTick(_ => {
+        this.$refs['saveTagInput' + tag.seq][0].focus()
+      })
+      this.mouseFocusPosition = tag.seq
+    },
+    // tag鐐瑰嚮浜嬩欢
+    elTagClick(tag) {
+      if (this.dynamicTags.every(i => i.editDisabled)) {
+        this.clickSelected = tag.seq
+        if (tag.effect === 'dark') {
+
+        } else {
+          this.dynamicTags.forEach(item => {
+            item.effect = 'light'
+          })
+          if (tag.effect === 'light') {
+            tag.effect = 'dark'
+          } else if (tag.effect === 'dark') {
+            tag.effect = 'light'
+          }
+        }
+      }
+    },
+    // 澶勭悊tag鍏抽棴浜嬩欢
+    handleTagClose(tag) {
+      // 褰撻�変腑鐨勬楠よ鍒犻櫎鏃�
+      if (tag.effect === 'dark') {
+        this.clickSelected = this.dynamicTags.length - 1
+      }
+      this.dynamicTags.forEach((item, index) => {
+        if (item.seq === tag.seq) {
+          this.dynamicTags.splice(index, 1)
+        }
+      })
+
+      const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)
+
+      if (routeSelectedArr !== undefined) {
+        this.routeArr.push(
+          {
+            stepcode: routeSelectedArr.stepcode,
+            stepname: routeSelectedArr.stepname,
+            value: routeSelectedArr.value
+          }
+        )
+      }
+      this.routeArr = this.routeArr.filter((currentValue, currentIndex, selfArr) => {
+        return selfArr.findIndex(item => item.stepcode === currentValue.stepcode) === currentIndex
+      })
+
+      // 閲嶆柊鎺掑簭
+      this.dynamicTags.forEach((item, index) => {
+        item.editDisabled = true
+        item.seq = index + 1
+        item.stepcode = ''
+        item.effect = index === this.dynamicTags.length - 1 ? 'dark' : 'light'
+      })
+      this.addDisabled = false
+    },
+    // tag娣诲姞鎸夐挳
+    showInput() {
+      const seq = this.dynamicTags.findIndex(i => i.effect === 'dark') + 2
+
+      // 鍏堝皢姣忎釜鐨則ag鏍囩棰滆壊鏀逛负娴呰壊
+      this.dynamicTags.forEach(i => {
+        i.effect = 'light'
+      })
+
+      this.autocompleteValue = ''
+      this.addDisabled = true
+      this.editDisabled = false
+
+      this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'dark' })
+      this.dynamicTags.forEach((item, index) => {
+        item.seq = index + 1
+        item.stepcode = ''
+      })
+      this.$nextTick(_ => {
+        this.$refs['saveTagInput' + seq][0].focus()
+      })
+
+      this.mouseFocusPosition = seq
+
+      this.dynamicTags.forEach((item, index) => {
+        item.editDisabled = seq === index + 1
+      })
     },
 
-    // 瀵硅瘽妗嗕腑鏌ヨid
-    dialogRadioChange(val) {
-      this.dialogContentArr.forEach(item => {
-        if (item.name === val) {
-          this.dialogRadioValueId = item.id
+    // 鑾峰彇宸ヨ壓璺嚎鍒楄〃娓呭崟
+    async getRouteSearch() {
+      const res = await RouteSearch(this.form)
+      this.tableData = res.data
+      this.total = res.count
+    },
+    // 鎺掑簭鏀瑰彉鏃�
+    sortChange({ column, prop, order }) {
+      if (order === 'descending') {
+        order = 'desc'
+      } else if (order === 'ascending') {
+        order = 'asc'
+      } else {
+        order = 'desc'
+      }
+      this.form.order = order
+      this.form.prop = prop
+      this.getRouteSearch()
+    },
+    // 鏌ヨ
+    search() {
+      this.getRouteSearch()
+    },
+    upload() {
+
+    },
+    // 閲嶇疆
+    reset() {
+      this.form.routecode = ''
+      this.form.routename = ''
+      this.form.description = ''
+      this.form.createuser = ''
+      this.getRouteSearch()
+    },
+
+    // 鏂板鎸夐挳
+    add(operation) {
+      this.operation = operation
+      this.dialogVisible = true
+      this.getStepSelectArr()
+    },
+    // 宸ヨ壓璺嚎棰勮
+    async edit(operation, row) {
+      this.operation = operation
+      this.dialogVisible = true
+
+      const { data: res } = await ViewRoute({ routecode: row.code })
+
+      this.dynamicTags = []
+      this.$nextTick(() => {
+        this.dialogForm.code = res[0].code
+        this.dialogForm.name = res[0].name
+        this.dialogForm.enable = res[0].enable
+        this.dialogForm.description = res[0].description
+        // this.dialogForm.Data = row.description
+        res[0].Data.forEach(item => {
+          this.dynamicTags.push(
+            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }
+          )
+        })
+      })
+    },
+    // 鍒犻櫎鎸夐挳
+    async del(row) {
+      this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        DeleteRoute({ routecode: row.code }).then(res => {
+          if (res.code === '200') {
+            this.$message.success('鍒犻櫎鎴愬姛!')
+            if (this.form.page > 1 && this.tableData.length === 1) {
+              this.form.page--
+            }
+            this.getRouteSearch()
+          }
+        })
+      }).catch(() => {
+        this.$message.info('宸插彇娑堝垹闄�')
+      })
+    },
+    // 澶嶅埗鎸夐挳
+    async copy(operation, row) {
+      this.operation = operation
+      this.dialogVisible = true
+
+      await this.getStepSelectArr()
+      const { data: res } = await ViewRoute({ routecode: row.code })
+      // 寰呮敼
+      this.dynamicTags = []
+      this.routeSelectedArr = []
+      this.$nextTick(() => {
+        this.dialogForm.code = res[0].code
+        this.dialogForm.name = res[0].name
+        this.dialogForm.enable = res[0].enable
+        this.dialogForm.description = res[0].description
+        res[0].Data.forEach((item, index) => {
+          this.dynamicTags.push(
+            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: index === res[0].Data.length - 1 ? 'dark' : 'light' }
+          )
+          this.routeSelectedArr.push({
+            stepcode: item.stepcode,
+            stepname: item.stepname,
+            value: item.stepname
+          })
+          this.routeArr = this.routeArr.filter(i => i.stepcode !== item.stepcode)
+        })
+
+        this.addDisabled = false
+        this.clickSelected = this.dynamicTags.length
+      })
+    },
+    // 瀵硅瘽妗嗗叧闂簨浠�
+    handleClose() {
+      this.dialogForm.code = ''
+      this.dialogForm.name = ''
+      this.dialogForm.enable = 'Y'
+      this.dialogForm.description = ''
+      this.dialogForm.Data = []
+
+      this.dynamicTags = [
+        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
+      ]
+      this.addDisabled = true
+      this.routeSelectedArr = []
+      this.$refs.dialogForm.clearValidate()
+    },
+    // 瀵硅瘽妗嗗彇娑�
+    dialogVisibleCancel() {
+      this.dialogVisible = false
+    },
+    // 瀵硅瘽妗嗙‘璁�
+    dialogVisibleConfirm() {
+      if (this.dynamicTags[0].stepname.trim() === '') {
+        return this.$message.info('宸ヨ壓璁剧疆绗竴椤逛笉鑳戒负绌猴紒')
+      }
+      const Data = []
+      this.dynamicTags.forEach(item => {
+        Data.push({
+          seq: item.seq,
+          stepcode: this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode,
+          stepname: item.stepname
+        })
+      })
+
+      Data.forEach(item => {
+        if (item.stepname === this.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {
+          item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode
+        }
+      })
+
+      this.$refs.dialogForm.validate(valid => {
+        if (valid) {
+          this.$store.state.app.buttonIsDisabled = true
+          const data = {
+            code: this.dialogForm.code,
+            name: this.dialogForm.name,
+            enable: this.dialogForm.enable,
+            description: this.dialogForm.description,
+            Data: Data
+          }
+
+          AddUpdateRoute(this.dialogForm.id, this.operation === 'edit' ? 'Update' : 'Add', data).then(res => {
+            if (res.code === '200') {
+              this.dialogVisible = false
+              this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '澶嶅埗鎴愬姛锛�')
+              this.getRouteSearch()
+              this.$store.state.app.buttonIsDisabled = false
+            } else {
+              this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '澶嶅埗澶辫触锛�')
+            }
+          })
         }
       })
     },
-    nodeClick(obj, node, data) {
-      // console.log(obj, node, data)
+    // 鑾峰彇椤甸潰楂樺害
+    getHeight() {
+      this.$nextTick(() => {
+        this.mainHeight = window.innerHeight - 85
+        this.tableHeight = this.mainHeight - 195
+        if (window.innerHeight < 769) {
+          this.tableHeight = this.tableHeight - 40
+        }
+        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
+        this.$refs.tableDataRef.doLayout()
+      })
     },
-    // 瀵硅瘽妗嗙‘璁ゆ寜閽�
-    dialogVisibleConfirm() {
-      // 寰楀埌鐨勬爲褰㈣妭鐐�
-      const treeIdArr = this.$refs.tree.getCheckedKeys()
-      // 鍗曢�夋id
-      // this.dialogRadioValueId
-
-      this.dialogVisible = false
-    },
-    // 鍏宠仈宸ヤ綔绔欑偣鍑讳簨浠�
-    shareClick(row) {
-      this.dialogVisible = true
-      this.dialogGxmc = row.gxmc
-    },
-    // 瀵硅瘽妗嗗叧闂箣鍓嶅鐞�
-    handleClose() {
-      this.dialogRadioValue = ''
-      this.$refs.tree.setCheckedKeys([])
-    },
-    dialogVisibleCancel() {
-      this.dialogVisible = false
-      this.dialogRadioValue = ''
-      this.$refs.tree.setCheckedKeys([])
-    },
-    // 閲嶇疆浜嬩欢
-    reset() {
-      this.form.gylx = ''
-      this.form.wlbm = ''
-      this.form.wlmc = ''
-    },
-    // 澶勭悊琛ㄥご鍗曞厓鏍兼牱寮�
-    headerCellStyle() {
-      const option = {
-        background: '#eee', padding: '5px 0'
-        // border: '1px solid #fff'
-      }
-      return option
-    },
-    // 澶勭悊琛ㄥご琛屾牱寮�
-    headerRowStyle() {
-
-    },
-    // 澶勭悊琛ㄦ牸鍗曞厓鏍兼牱寮�
-    cellStyle() {
-      return { padding: '5px 0' }
-    },
-    // 鏌ヨ浜嬩欢
-    async search() {
-      const data = this.form
-      console.log(data)
-      // const res=await xxx(data)
+    tableRowClassName({ row, rowIndex }) {
+      return 'custom-row'
     }
   }
 }
 </script>
 
-<style scoped>
-::v-deep .el-button--primary {
-  background-color: #42b983 !important;
-  height: 30px;
+<style lang="scss" scoped>
+$main_color: #42b983;
+
+/*
+瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔犳牱寮�
+*/
+
+.orderNumber {
+  margin-bottom: 31px;
+  position: absolute;
+  margin-left: -7px;
+  z-index: 2;
+  width: 16px;
+  height: 16px !important;
+  font-size: 12px;
+  text-align: center;
+  line-height: 15px;
+  color: #FFFFFF;
+  background-color: #409EFF;
+  border-radius: 50%;
+}
+
+.el-icon-edit {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  padding: 3px 0 0 3px;
+  margin-left: 5px;
+  cursor: pointer;
+  position: absolute;
+  right: 3px;
+  bottom: 8px;
+}
+
+.el-icon-edit:hover {
+  background-color: #99a9bf;
+  color: #FFFFFF;
+}
+
+.el-icon-close {
+  position: absolute;
+  top: -8px;
+  z-index: 2;
+  left: 141px;
+  cursor: pointer;
+  color: #FFFFFF;
+  border-radius: 50%;
+  background-color: #ff7474;
+  padding: 1px 0 0 1px;
+}
+
+//.el-icon-close:hover {
+//  background-color: #99a9bf;
+//}
+
+.el-tag--dark {
+  background-color: $main_color;
+  border-color: $main_color;
+}
+
+.tagSuccess {
+  margin-left: 20px;
+  width: 100px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  color: $main_color;
+}
+
+::v-deep .el-button--success {
+  width: 40px !important;
+  background-color: #ecf5ff;
+  border-radius: 0;
+  color: $main_color;
+}
+
+::v-deep .el-button--success:disabled {
+  background-color: #eeeeee;
+  color: $main_color;
+}
+
+::v-deep .el-tag {
+  //height: 30px;
+  border-radius: 0;
+  border: 1px solid $main_color;
+}
+
+::v-deep .el-input--small .el-input__inner {
+  border-radius: 0;
+}
+
+.settingDiv {
+  display: flex;
+  width: 100%;
+  padding-left: 7px;
+  height: 56px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  align-items: center;
+  background: aliceblue;
+}
+
+.elTag {
+  margin-left: 0;
+  width: 150px;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.autocompleteClass {
+  .el-autocomplete-suggestion li {
+    //color: red;
+  }
+}
+</style>
+
+<!--鍏叡椤甸潰鏍峰紡-->
+<style lang="scss" scoped>
+$main_color: #42b983;
+.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
+  color: $main_color;
+  cursor: pointer;
+}
+
+.el-icon-edit-outline {
+  margin-right: 15px;
+}
+
+::v-deep .el-button--primary, .el-button--default, .el-button--info {
+  height: 34px;
   display: flex;
   align-items: center;
+  padding: 0 15px;
 }
 
-::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
-  background-color: #42b983 !important;
+::v-deep .el-button--primary {
+  //background-color: $main_color !important;
 }
 
-::v-deep .el-button--text {
-  color: #42b983;
-  font-size: 14px;
+::v-deep .el-button--default {
+  background-color: #f8f8fa;
+  border: none;
 }
 
-::v-deep .el-step__head.is-finish {
-  color: #42b983;
-  border-color: #42b983;;
+::v-deep .el-input__inner {
+  height: 34px;
+  line-height: 34px;
+  //color: #a7a7a7;
 }
 
-::v-deep .el-step__title.is-finish {
-  color: #42b983;
+::v-deep .el-dialog__body {
+  padding: 20px 20px !important;
 }
 
-::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
-  margin: 10px 30px 0px 0;
-
+::v-deep .dialogVisibleRoles .el-dialog__body {
+  padding: 20px 20px !important;
 }
 
-::v-deep .el-icon-caret-right:before {
-  content: '' !important;
+::v-deep .importPickerClass .el-dialog__body {
+  padding: 20px 20px !important;
 }
 
-::v-deep .el-radio__input.is-checked+.el-radio__label{
-  color: #42b983;
+::v-deep .el-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
 }
 
-::v-deep .el-radio.is-bordered.is-checked{
-  border-color: #42b983;
+::v-deep .el-table .caret-wrapper {
+  transform: scale(0.8);
 }
 
-::v-deep .el-radio__input.is-checked .el-radio__inner{
-  border-color: #42b983;
-  background: #42b983;
+::v-deep .cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
-  border-color: #42b983;
-  background-color: #42b983;
+::v-deep .el-table::before {
+  height: 0;
 }
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-  border-color: #42b983;
-  background-color: #42b983;
+
+::v-deep .el-table__body-wrapper {
+  background-color: #f8f8fa;
 }
-/*::v-deep .el-divider--horizontal{*/
-/*  margin:0 0 10px 0;*/
-/*}*/
+
+::v-deep .el-table__body .el-table__row.hover-row td {
+  background-color: #eaecef;
+}
+
+::v-deep .el-form--inline .el-form-item__label {
+  color: #a7a7a7;
+}
+
+.body ::v-deep .el-divider {
+  border: 1px solid #eee;
+  width: 99%;
+  margin: 10px auto;
+}
+
+.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>
+
+.el-table .custom-row {
+  background: #f8f8fa;
+}
 </style>

--
Gitblit v1.9.3