From a271e033ffebf9e95c9ee54fac8891814583571f Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 24 六月 2022 17:30:27 +0800
Subject: [PATCH] 1.页面响应式配置2.设备清单页面的开发

---
 src/views/zzmx/gylx.vue |  978 ++++++++++++++++++++++++++++++++------------------------
 1 files changed, 554 insertions(+), 424 deletions(-)

diff --git a/src/views/zzmx/gylx.vue b/src/views/zzmx/gylx.vue
index 2e33e49..db93532 100644
--- a/src/views/zzmx/gylx.vue
+++ b/src/views/zzmx/gylx.vue
@@ -1,7 +1,7 @@
 <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 style="padding: 10px 5px 0 0">
         <el-form
           ref="form"
           :model="form"
@@ -9,453 +9,510 @@
           inline
           style="display: flex;justify-content: space-between"
         >
-          <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;">
+          <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="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">閲嶇疆
-            </el-button>
+            <el-button 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>
-      <div style="display: flex;width: 100%;">
-        <div>
-          <el-table
-            :data="tableData1"
-            style="width: 100%;border: 1px solid #eee"
-            :header-cell-style="this.$headerCellStyle"
-            :cell-style="this.$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 show-overflow-tooltip label="鐗╂枡缂栫爜" prop="wlbm" />
-            <el-table-column show-overflow-tooltip 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;"
+      <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
+          :data="tableData"
+          :height="tableHeight"
+          border
+          :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="搴忓彿"
           />
-        </div>
-        <div style="margin:0 20px;width: 71%;">
-          <el-table
-            :data="tableData2"
-            border
-            height="500px"
-            style="width: 100%;"
-            :header-cell-style="this.$headerCellStyle"
-            :cell-style="this.$cellStyle"
+          <el-table-column
+            prop="code"
+            label="缂栫爜"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="name"
+            label="鍚嶇О"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="description"
+            label="宸ヨ壓璺嚎鎻忚堪"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="enable"
+            label="浣跨敤鐘舵��"
+            sortable="custom"
           >
-            <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" />
-                </el-tooltip>
-                <el-tooltip content="淇敼" placement="top">
-                  <el-button type="text" icon="el-icon-edit" />
-                </el-tooltip>
-                <el-tooltip content="鍒犻櫎" placement="top">
-                  <el-button type="text" icon="el-icon-delete" />
-                </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>
+            <template slot-scope="{row}">
+              <div v-if="row.enable==='Y'">鏄�</div>
+              <div v-if="row.enable==='N'">鍚�</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="lm_user"
+            label="鍒涘缓浜哄憳"
+            sortable="custom"
+          />
+          <el-table-column
+            prop="lm_date"
+            label="鍒涘缓鏃堕棿"
+            sortable="custom"
+          />
+          <el-table-column
+            label="鎿嶄綔"
+          >
+            <template slot-scope="{row}">
+              <div class="operationClass">
+                <!--                <el-button type="text" @click="edit('edit',row)">淇敼</el-button>-->
+                <el-button type="text" @click="del(row.id)">鍒犻櫎</el-button>
+              </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
+        v-show="total>0"
+        :total="total"
+        :page.sync="form.page"
+        :limit.sync="form.rows"
+        align="right"
+        layout="prev, pager, next,sizes"
+        popper-class="select_bottom"
+        @pagination="getRouteSearch"
+      />
     </div>
 
+    <el-dialog
+      :title="operation==='add'?'鏂板':'淇敼'"
+      :visible.sync="dialogVisible"
+      width="80%"
+      top="15vh"
+      @closed="handleClose"
+      @close="handleClose"
+    >
+      <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
+        <div style="display: flex">
+          <el-form-item label="宸ヨ壓缂栫爜" prop="OrgCode" style="margin-right: 20px">
+            <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
+          </el-form-item>
+          <el-form-item label="宸ヨ壓鍚嶇О" prop="OrgName">
+            <el-input v-model="dialogForm.OrgName" style="width: 220px" />
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item prop="SupUnit" label="浣跨敤鐘舵��" style="margin-right: 20px">
+            <el-select
+              v-model="dialogForm.isEnable"
+              style="width: 220px"
+              placeholder="璇烽�夋嫨"
+            >
+              <el-option
+                v-for="item in SupUnitArr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="宸ヨ壓鎻忚堪" prop="OrgName">
+            <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
+          </el-form-item>
+        </div>
+        <el-form-item label="宸ヨ壓璁剧疆" prop="OrgName">
+          <div style="display: flex;width:100%;overflow-y: scroll">
+            <!--   瀹炵幇宸ヨ壓璁剧疆鍔ㄦ�佹坊鍔�-->
+            <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;">
+              <el-tag
+                v-if="flag||tag.label!==flagSelected"
+                closable
+                :disable-transitions="false"
+                style="margin-left: 0;width: 100px;"
+                :class="tagClass(tag.label)"
+                :effect="tag.effect"
+                @close="handleTagClose(tag.label)"
+                @click="elTagClick(tag)"
+              >
+                {{ tag.label }}
+                <i class="el-icon-edit" @click="tagEdit(tag)" />
+              </el-tag>
+
+              <el-autocomplete
+                v-if="!flag&&tag.label===flagSelected"
+                :ref="'saveTagInput'+tag.id"
+                v-model="value"
+                class="input-new-tag"
+                size="small"
+                :fetch-suggestions="querySearch"
+                style="margin-left: 0px;width: 100px;transform: translate(1)"
+                autofocus
+                @select="handleSelect"
+                @keyup.enter.native="handleInputConfirm2"
+              />
+              <!--        @blur="handleBlur2"-->
+
+              <div v-if="index!==dynamicTags.length-1" style="width: 40px;">----></div>
+            </div>
+            <!--            :disabled="addDisabled"-->
+            <el-button type="primary" style="margin-left: 20px;width: 100px;height: 32px;" size="small" @click="showInput">+
+              娣诲姞
+            </el-button>
+
+          </div>
+        </el-form-item>
+      </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>
+        </div>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-
 import Pagination from '@/components/Pagination'
-import { cellStyle } from '@/utils/global'
+import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
+import { getCookie } from '@/utils/auth'
+import { RouteSearch } from '@/api/zzmx'
 
+const SER_HZ = /^[\u4e00-\u9fa5]+$/
 export default {
-  name: 'Gylx',
+  name: 'Zzjg',
   components: {
     Pagination
   },
   data() {
-    return {
-      form: {
-        pageNum: 1, // 绗嚑椤�
-        pageSize: 10, // 姣忛〉澶氬皯鏉�
-        gylx: '', // 鍏泭璺嚎
-        wlbm: '', // 鐗╂枡缂栫爜
-        wlmc: ''// 鐗╂枡鍚嶇О
-      },
-      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' }
-      ],
-      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'
-      },
-      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'
-              }
-              ]
-            }
-          ]
+    const validateName = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('璇疯緭鍏ョ紪鐮�'))
+      } else {
+        if (SER_HZ.test(value)) {
+          return callback(new Error('缂栫爜涓嶈兘涓轰腑鏂�'))
+        } else {
+          callback()
         }
-
+      }
+    }
+    const validateTypeCode = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('璇烽�夋嫨涓婄骇'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      mainHeight: 0,
+      tableHeight: 0,
+      form: {
+        routecode: '', // 宸ヨ壓璺嚎缂栫爜
+        routename: '', // 宸ヨ壓璺嚎鍚嶇О
+        description: '', // 宸ヨ壓璺嚎鎻忚堪
+        createuser: '', // 鍒涘缓浜哄憳
+        prop: 'lm_date', // 鎺掑簭瀛楁
+        order: 'desc', // 鎺掑簭瀛楁
+        page: 1, // 绗嚑椤�
+        rows: 10 // 姣忛〉澶氬皯鏉�
+      },
+      isEnable: [
+        { label: '鏄�', value: 'Y' },
+        { label: '鍚�', value: 'N' }
       ],
-      dialogRadioValue: '',
-      dialogRadioValueId: 0
+      total: 10,
+      tableData: [],
+      dialogVisible: true,
+      dialogForm: {
+        OrgType: '',
+        OrgCode: '',
+        OrgName: '',
+        SupUnit: ''// 涓婄骇鍗曚綅
+      },
+      dynamicTags: [// 宸ヨ壓璁剧疆鏁扮粍
+        { id: 1, label: '鏍囩涓�', effect: 'light' },
+        { id: 2, label: '鏍囩浜�', effect: 'light' },
+        { id: 3, label: '鏍囩涓�', effect: 'light' }
+      ],
+      tagSelectedId: '', // tag閫夋嫨涓璱d
+      flag: true,
+      flagSelected: '', // 鍒ゆ柇鏄惁閫変腑
+      value: '',
+      restaurants: [],
+      addDisabled: false,
+
+      operation: '',
+      dialogFormRules: {
+        OrgType: [
+          { required: true, message: '璇疯緭鍏ラ�夋嫨绫诲瀷', trigger: ['blur', 'change'] }
+        ],
+        OrgCode: [
+          { required: true, validator: validateName, trigger: ['blur', 'change'] }
+        ],
+        OrgName: [
+          { required: true, message: '璇疯緭鍏ュ悕绉�', trigger: ['blur', 'change'] }
+        ],
+        SupUnit: [
+          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
+        ]
+      }
+
     }
   },
   created() {
-
+    this.getRouteSearch()
+  },
+  mounted() {
+    window.addEventListener('resize', this.getHeight)
+    this.getHeight()
+    this.restaurants = this.loadAll()
   },
   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) {
+      var restaurants = this.restaurants
+      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 璋冪敤 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 (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    loadAll() {
+      return [
+        { 'value': '涓夊叏椴滈锛堝寳鏂版尘搴楋級', 'address': '闀垮畞鍖烘柊娓旇矾144鍙�' },
+        { 'value': 'Hot honey 棣栧皵鐐搁浮锛堜粰闇炶矾锛�', 'address': '涓婃捣甯傞暱瀹佸尯娣炶櫣璺�661鍙�' },
+        { 'value': '鏂版椇瑙掕尪椁愬巺', 'address': '涓婃捣甯傛櫘闄�鍖虹湡鍖楄矾988鍙峰垱閭戦噾娌欒胺6鍙锋ゼ113' },
+        { 'value': '娉峰崈瀹�(澶╁北瑗胯矾搴�)', 'address': '澶╁北瑗胯矾438鍙�' },
+        { 'value': '鑳栦粰濂崇焊鏉泲绯曪紙涓婃捣鍑岀┖搴楋級', 'address': '涓婃捣甯傞暱瀹佸尯閲戦挓璺�968鍙�1骞�18鍙锋ゼ涓�灞傚晢閾�18-101' },
+        { 'value': '璐¤尪', 'address': '涓婃捣甯傞暱瀹佸尯閲戦挓璺�633鍙�' },
+        { 'value': '璞ぇ澶ч楦℃帓瓒呯骇濂剁埜', 'address': '涓婃捣甯傚槈瀹氬尯鏇瑰畨鍏矾鏇瑰畨璺�1685鍙�' },
+        { 'value': '鑼惰姖鍏帮紙濂惰尪锛屾墜鎶撻ゼ锛�', 'address': '涓婃捣甯傛櫘闄�鍖哄悓鏅矾1435鍙�' }
+      ]
+    },
+    handleSelect(item) {
+      console.log(item)
+    },
+    handleInputConfirm2() {
+      console.log(this.flagSelect, 111)
+      // this.dynamicTags.forEach((item,index) => {
+      //   if (item === this.flagSelect) {
+      //     console.log(item, 111)
+      //     item = this.flagSelect
       //   }
-      // }
+      // })
+      console.log(this.value)
+      this.addDisabled = false
+      this.flagSelect = ''
+      this.value = ''
+      this.flag = !this.flag
     },
-    radioValueChange(val) {
-      console.log(val)
+    tagEdit(tag) {
+      this.addDisabled = true
+      this.flagSelect = tag.label
+      this.value = tag.label
+      this.flag = !this.flag
+      this.$nextTick(_ => {
+        this.$refs['saveTagInput' + tag.id][0].focus()
+      })
+    },
+    elTagClick(tag) {
+      console.log(tag)
+
+      this.tagSelectedId = tag.id
+      if (tag.effect === 'dark') {
+        tag.effect = 'light'
+        this.tagSelectedId = ''
+      } else {
+        this.dynamicTags.forEach(item => {
+          item.effect = 'light'
+        })
+        if (tag.effect === 'light') {
+          tag.effect = 'dark'
+        } else if (tag.effect === 'dark') {
+          tag.effect = 'light'
+        }
+      }
+
+      console.log(this.$el)
+      // console.log(this.$el.style.color = 'red')
     },
 
-    // 瀵硅瘽妗嗕腑鏌ヨid
-    dialogRadioChange(val) {
-      this.dialogContentArr.forEach(item => {
-        if (item.name === val) {
-          this.dialogRadioValueId = item.id
+    tagClass() {
+      // this.tagSelect.style({ backgroundColor: 'red' })
+      // return { backgroundColor: 'red' }
+    },
+    handleTagClose(tag) {
+      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+      this.dynamicTags.forEach((item, index) => {
+        if (item.label === tag) {
+          console.log(item.label === tag)
+          this.dynamicTags.splice(index, 1)
         }
       })
     },
-    nodeClick(obj, node, data) {
-      // console.log(obj, node, data)
-    },
-    // 瀵硅瘽妗嗙‘璁ゆ寜閽�
-    dialogVisibleConfirm() {
-      // 寰楀埌鐨勬爲褰㈣妭鐐�
-      const treeIdArr = this.$refs.tree.getCheckedKeys()
-      // 鍗曢�夋id
-      // this.dialogRadioValueId
 
-      this.dialogVisible = false
+    showInput() {
+      // this.inputVisible = true
+      this.addDisabled = true
+      if (this.tagSelectedId === '' || this.tagSelectedId === this.dynamicTags.length) {
+        this.dynamicTags.push(
+          { id: (this.dynamicTags.length + 1), label: '', effeft: 'light' }
+        )
+      } else {
+        console.log(this.tagSelectedId, 31)
+        this.dynamicTags.splice(this.tagSelectedId, 0, { id: this.dynamicTags.length + 1, label: '', effect: 'light' })
+      }
+      this.flag = !this.flag
+      this.$nextTick(_ => {
+        this.$refs['saveTagInput' + this.dynamicTags.length ][0].focus()
+      })
+      // this.$nextTick(_ => {
+      //   console.log(this.$refs['saveTagInput'], 321)
+      //   this.$refs.saveTagInput.$refs.input.focus()
+      // })
     },
-    // 鍏宠仈宸ヤ綔绔欑偣鍑讳簨浠�
-    shareClick(row) {
+    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.OrgCode = ''
+      this.form.OrgName = ''
+      this.form.OrgType = ''
+      this.form.UserName = ''
+      this.getRouteSearch()
+    },
+
+    // 鏂板鎸夐挳
+    add(operation) {
+      this.operation = operation
       this.dialogVisible = true
-      this.dialogGxmc = row.gxmc
     },
-    // 瀵硅瘽妗嗗叧闂箣鍓嶅鐞�
+    // 淇敼鎸夐挳
+    edit(operation, row) {
+      this.operation = operation
+      this.dialogVisible = true
+
+      this.$nextTick(() => {
+        this.dialogForm.OrgCode = row.org_code
+        this.dialogForm.OrgName = row.org_name
+        this.dialogForm.SupUnit = row.parent_id
+      })
+    },
+    // 鍒犻櫎鎸夐挳
+    async del(id) {
+      this.$confirm('鏄惁纭鍒犻櫎?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        DeleteOrganization({ orgid: id }).then(res => {
+          if (res.code === '200') {
+            this.$message.success('鍒犻櫎鎴愬姛!')
+            this.getRouteSearch()
+          }
+        })
+      }).catch(() => {
+        this.$message.info('宸插彇娑堝垹闄�')
+      })
+    },
+    // 瀵硅瘽妗嗗叧闂簨浠�
     handleClose() {
-      this.dialogRadioValue = ''
-      this.$refs.tree.setCheckedKeys([])
+      this.dialogForm.OrgType = ''
+      this.dialogForm.OrgCode = ''
+      this.dialogForm.OrgName = ''
+      this.dialogForm.SupUnit = ''
+      this.$refs.dialogForm.clearValidate()
     },
+    // 瀵硅瘽妗嗗彇娑�
     dialogVisibleCancel() {
       this.dialogVisible = false
-      this.dialogRadioValue = ''
-      this.$refs.tree.setCheckedKeys([])
     },
-    // 閲嶇疆浜嬩欢
-    reset() {
-      this.form.gylx = ''
-      this.form.wlbm = ''
-      this.form.wlmc = ''
+    // 瀵硅瘽妗嗙‘璁�
+    dialogVisibleConfirm() {
+      this.$refs.dialogForm.validate(valid => {
+        if (valid) {
+          const data = {
+            OrganType: this.dialogFormOrgTypeSelected,
+            OrganCode: this.dialogForm.OrgCode,
+            OrganName: this.dialogForm.OrgName,
+            SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit,
+            OperType: this.operation === 'add' ? 'Add' : 'Update',
+            Operator: getCookie('admin')
+          }
+          // AddUpdateOrganization(data).then(res => {
+          //   if (res.code === '200') {
+          //     this.$message.success(this.operation === 'add' ? '娣诲姞鎴愬姛锛�' : '淇敼鎴愬姛锛�')
+          //     this.dialogVisible = false
+          //     this.getRouteSearch()
+          //   } else {
+          //     this.$message.error(this.operation === 'add' ? '娣诲姞澶辫触锛�' : '淇敼澶辫触锛�')
+          //   }
+          // })
+        }
+      })
     },
-    // // 澶勭悊琛ㄥご鍗曞厓鏍兼牱寮�
-    // headerCellStyle() {
-    //   const option = {
-    //     background: '#eee', padding: '5px 0'
-    //   }
-    //   return option
-    // },
-    // // 澶勭悊琛ㄥご琛屾牱寮�
-    // headerRowStyle() {
-    //
-    // },
-    // // 澶勭悊琛ㄦ牸鍗曞厓鏍兼牱寮�
-    // cellStyle() {
-    //   // return {padding: '5px 0'}
-    //   return { padding: '0' }
-    // },
-    // 鏌ヨ浜嬩欢
-    async search() {
-      const data = this.form
-      console.log(data)
-      // const res=await xxx(data)
+    // 鑾峰彇椤甸潰楂樺害
+    getHeight() {
+      this.$nextTick(() => {
+        this.mainHeight = window.innerHeight - 250
+        this.tableHeight = this.mainHeight - 100
+      })
     }
   }
 }
@@ -468,40 +525,95 @@
   height: 30px;
   display: flex;
   align-items: center;
+  border: 1px solid $main_color;
+  padding: 0 20px;
+}
+
+::v-deep .el-button--info {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
 }
 
 ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: $main_color !important;
 }
 
-::v-deep .el-button--text {
-  color: $main_color;
-  font-size: 14px;
+::v-deep .el-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
 }
 
-::v-deep .el-step__head.is-finish {
-  color: $main_color;
-  border-color: $main_color;;
+.footerButton {
+  display: flex;
+  justify-content: end;
 }
 
-::v-deep .el-step__title.is-finish {
-  color: $main_color;
+::v-deep .el-button--default {
+  background-color: #ffffff !important;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
 }
 
-::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
-  margin: 10px 30px 0px 0;
-
+::v-deep .el-button--default:hover {
+  color: #606266;
 }
 
-::v-deep .el-icon-caret-right:before {
-  content: '' !important;
+::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;
+  color: $main_color !important;
 }
 
-::v-deep .el-radio.is-bordered.is-checked {
+::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-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;
+}
+
+.el-icon-share {
+  color: $main_color;
+  cursor: pointer;
+}
+
+.el-checkbox.is-bordered.is-checked {
   border-color: $main_color;
 }
 
@@ -510,17 +622,35 @@
   background: $main_color;
 }
 
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
-  border-color: $main_color;
-  background-color: $main_color;
-}
-
 ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   border-color: $main_color;
-  background-color: $main_color;
+  background: $main_color;
 }
 
-/*::v-deep .el-divider--horizontal{*/
-/*  margin:0 0 10px 0;*/
-/*}*/
+::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;
+}
+
+.body ::v-deep .el-divider {
+  border: 1px solid #eee;
+  width: 99%;
+  margin: 10px auto;
+}
+
+.body ::v-deep .el-form-item {
+  margin-bottom: 0;
+}
+
 </style>

--
Gitblit v1.9.3