From 5e2ec860c501c71b32b47208e4f2d22f8eb83908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Fri, 4 Aug 2023 16:09:17 +0800
Subject: [PATCH] showCopyJsonPop-interface

---
 .../src/components/showCopyJsonPop/index.vue  | 267 +++++++
 .../src/components/umyTable/index copy.vue    | 663 ++++++++----------
 .../src/components/umyTable/index.vue         | 223 +-----
 3 files changed, 596 insertions(+), 557 deletions(-)
 create mode 100644 PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue

diff --git a/PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue b/PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue
new file mode 100644
index 0000000..2d944d8
--- /dev/null
+++ b/PC/InterFace.Dash/src/components/showCopyJsonPop/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <!-- 组件功能：查看json及复制 -->
+  <div class="showCopyJsonPop">
+
+    <!-- 点开查看Json转换后table弹窗 -->
+    <el-dialog 
+      :visible.sync="JsonTableShow"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      :title="'内容详情'"
+      width="90%"
+      @close="closePop"
+    >
+      <el-button 
+          @click="copyJsonHandle()" 
+          type="primary" 
+          style="margin-bottom: 10px;float: right;"
+      >复制JSON</el-button>
+      <el-table
+        :data="JsonTableData"
+        :border="true"
+        style="width: 100%">
+        <el-table-column
+          prop="name"
+          width="220"
+          label="属性"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.name }}
+            <el-button 
+              type="primary"
+              v-if="(scope.row.name).toUpperCase() == 'DETAILS'"
+              size="mini"
+              style="margin-left: 20px;"
+              @click="showDetailTableHandle(scope.row)"
+            >查看详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="值"
+        >
+          <template slot-scope="scope">
+              <!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 -->
+              <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
+              <el-table
+                v-else
+                :data="scope.row.value"
+                stripe
+                :border="true"
+                style="width: 100%"
+                height="300"
+              >
+                <el-table-column
+                  label="序号"
+                  fixed="left"
+                  type="index"
+                  width="50">
+                </el-table-column>
+                <el-table-column
+                  v-for="(head,h_key) in detailTableHeader"
+                  :key="h_key"
+                  min-width="120"
+                >
+                  <template #header>
+                    <span :title="head">{{ head }}</span>
+                  </template>
+                  <template slot-scope="scope2">
+                    <div v-if="typeof scope2.row[head] == 'object'">
+                      <div v-for="(o,o_key) in scope2.row[head]">
+                        {{ o_key }}：{{ o }}
+                        <div style="border-bottom: dashed 1px #ddd;"></div>
+                      </div>
+                    </div>
+                    <div v-else>{{ scope2.row[head] }}</div>
+                  </template>
+                </el-table-column>
+              </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    
+    <!-- json复制内容弹窗 -->
+    <el-dialog
+      id="copyJsonTextarea_dialog_ref"
+      :visible.sync="JsonCopyShow"
+      :modal-append-to-body="false"
+      :append-to-body="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      :title="'JSON详情'"
+    >
+      <el-input
+        ref="copyJsonTextarea_ref"
+        type="textarea"
+        readonly
+        autosize
+        resize="none"
+        v-model="JsonCopyData"
+      ></el-input>
+    </el-dialog>
+
+    <!-- details的table -->
+    <el-dialog
+      width="86%"
+      v-if="detailTableRow"
+      :visible.sync="detailsTableShow"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      :title="detailTableRow.name+' 详情'"
+    >
+      <umyTable
+        :isShowIndex="true"
+        :tableBorder="true"
+        :tableData="detailTableRow.value"
+        :tableColumns="detailTableColumns"
+        :selectionTable="false"
+      ></umyTable>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { LoadingMixins } from "@/mixins/LoadingMixins";
+import { tableMixins } from "@/mixins/TableMixins"
+export default {
+  name:"showCopyJsonPop",
+  mixins:[ LoadingMixins,tableMixins ],
+  props: {
+    // Json数据
+    JsonData:{
+      type: Object,
+      default: null,
+    },
+  },
+  data () {
+    return {
+      JsonTableShow:true,//点开查看Json转换后table弹窗
+      JsonTableData:null,//表格转义的json数据
+      JsonCopyData:null,//复制的Json字符串
+      JsonCopyShow:false,//复制json的Dialog显隐控制
+      detailTableHeader:null,//details表格的Header
+      detailTableRow:null,//details的相关信息
+      detailsTableShow:false,//details的详情
+      detailTableColumns:false,//details的详情header表头
+    }
+  },
+  mounted(){
+    this.initJsonData()
+  },
+  methods: {
+    // 关闭整个弹窗
+    closePop() {
+      this.JsonTableShow = false
+      this.$emit("closePop")
+    },
+    // json数据转义
+    initJsonData(){
+      let _arr = []
+      let __initJson = (data) => {
+        let _init = []
+        for(let item in data){
+          _init.push({name:item,value:data[item]})
+        }
+        return _init
+      }
+      let _json = this.JsonData
+      for(let item in _json){
+        // 直接输出
+        if(!_json[item]){
+          _arr.push({name:item,value:_json[item]})
+        }else{
+          if(typeof _json[item] != 'object'){
+            _arr.push({name:item,value:_json[item] + ""})
+          }else{
+              // 如果是数组
+            if(Array.isArray(_json[item])){
+              //  如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式
+              // let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
+              this.detailTableHeader = []
+              for(let h in _json[item][0]){
+                this.detailTableHeader.push(h)
+              }
+              let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",")
+              _arr.push({name:item,value:_value})
+            }
+            // 如果是对象
+            else{    
+              let _obj_arr = __initJson(_json[item]) 
+              // 对象有数据
+              if(_obj_arr.length > 0){
+                _arr = [..._obj_arr]
+              }else{
+                // 空对象
+                _arr.push({name:item,value:""})
+              }
+            }
+          }
+        }
+      }
+      this.JsonTableData = _arr
+      this.JsonCopyData = JSON.stringify(_json, null, '\t')//复制使用
+    },
+    // 复制Json按钮
+    copyJsonHandle(){
+      this.JsonCopyShow = true
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(this.JsonCopyData)
+          .then(() => {
+            this.$message.success('复制成功');
+            this.$refs.copyJsonTextarea_ref.focus()
+            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+          })
+          .catch(err => {
+            this.$message.error('复制失败');
+            this.$refs.copyJsonTextarea_ref.focus()
+            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+          });
+      }else {
+        // 创建text area
+        const textArea = document.createElement('textarea')
+        textArea.value = this.JsonCopyData
+        // 使text area不在viewport，同时设置不可见
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        return new Promise((resolve, reject) => {
+            // 执行复制命令并移除文本框
+            document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
+            textArea.remove()
+        }).then(() => {
+          this.$nextTick(()=>{
+            if(this.$refs.copyJsonTextarea_ref){
+              this.$message.success('复制成功');
+              this.$refs.copyJsonTextarea_ref.focus()
+              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+            }
+          })
+        },() => {
+          this.$message.error('复制失败');
+          this.$refs.copyJsonTextarea_ref.focus()
+          document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+        })
+      }
+      
+    },
+    // detail的table详情
+    showDetailTableHandle(row){
+      this.detailTableRow = row
+      this.detailTableColumns = []
+      this.detailTableHeader.forEach(item=>{
+        this.detailTableColumns.push({
+          prop:item,
+          label:item
+        })
+      })
+      this.detailsTableShow = true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/components/umyTable/index copy.vue b/PC/InterFace.Dash/src/components/umyTable/index copy.vue
index 73207f1..4e0ded2 100644
--- a/PC/InterFace.Dash/src/components/umyTable/index copy.vue	
+++ b/PC/InterFace.Dash/src/components/umyTable/index copy.vue	
@@ -1,10 +1,9 @@
 <template>
-  <!-- 解决el-table 数据量过大导致卡顿现象 -->  
+  <!-- 解决el-table 数据量过大导致卡顿现象 json查看没有拆出版本 -->  
   <u-table
     :id="_uid"
     :key="isUpdate"
     v-loading="tableLoading"
-    element-loading-text="拼命加载中..."
     @sort-change="sortChange"
     @selection-change="handleSelectionChange"
     ref="multipleTable"
@@ -14,11 +13,118 @@
     style="width: 100%"
     :cell-style="cellStyle"
     use-virtual
-    :row-height="50"
     :height="uTableHeight"
     header-row-class-name="uTableHeader"
   >
     <!-- :tree-props="treeProps" 与 “height”  不能共存， 此组件暂不支持tree的格式-->
+    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
+    <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
+    <template v-for="(item, index) in TableSize">
+    <u-table-column
+      min-width="150"
+      :key="index"
+      :prop="item.showProp ? item.prop + '.' + item.showProp : item.prop"
+      :sortable="item.sortable"
+      :fixed="setItemFixed(item,index)"
+      :show-overflow-tooltip="showOverflowTooltip"
+      :width="item.width"
+      :align="item.tableAlign"
+      :header-align="item.tableHeaderAlign"
+      v-if="item.istrue==null?true:item.istrue"
+    >
+      <template #header>
+        <span>{{ item.label }}</span>
+        <i style="color: #f56c6c" v-if="item.rules && requiredRules">*</i>
+      </template>
+      <template slot-scope="scope">
+        <!-- 正常表格回显 -->
+        <div v-if="!isEditable">
+          <!-- 时间转换 -->
+          <span v-if="item.apiBaseType == 'datetime'"
+            @click="showDetailInfo(scope.row[item.prop],'time')"
+            style="cursor: pointer;"
+            :title="'点击查看详情'"
+            class="showDetailHover itemSpan"
+          >
+            {{ scope.row[item.prop] | formatDate }}
+          </span>
+          <!-- 枚举 -->
+          <span v-else-if="item.isEnums" class="itemSpan">
+            {{ initApiEnumList(item,scope.row[item.prop]) }}
+          </span>
+          <!-- 布尔 -->
+          <span v-else-if="item.apiBaseType == 'boolean'" class="itemSpan">
+            {{ scope.row[item.prop] ? '是' : '否' }}
+          </span>
+          <!-- 数值 -->
+          <span v-else-if="item.apiBaseType == 'number'" class="itemSpan">
+            {{ scope.row[item.prop] }}
+          </span>
+          <!-- 点击可出详情 | 点击可点出json （目前已知String|Guid）-->
+          <span v-else
+            class="itemSpan"  
+            @click="showTypeHandle(initApiOtherType(scope.row[item.prop])[1],scope.row[item.prop])"
+            :style="initApiOtherType(scope.row[item.prop])[1] != 'show' ? 'cursor: pointer' : ''"
+            :title="'点击查看详情'"
+            :class="{ showDetailHover: initApiOtherType(scope.row[item.prop])[1] != 'show' }"
+          >
+            {{ initApiOtherType(scope.row[item.prop])[0] }}
+          </span>
+        </div>
+        <!-- 可编辑表格 -->
+        <div v-else>
+          <!-- 时间转换 -->
+          <el-date-picker
+            v-if="item.apiBaseType === 'datetime'"
+            v-model="scope.row[item.prop]"
+            type="datetime"
+            placeholder="选择日期时间"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-ddTHH:mm:ss"
+            :disabled="Boolean(item.disabled)"
+            size="mini"
+          ></el-date-picker>
+          <!-- 布尔、枚举 -->
+          <el-select 
+            v-else-if="item.isEnums || item.apiBaseType === 'boolean'"
+            v-model="scope.row[item.prop]" 
+            :placeholder="item.placeholder || '请选择' + item.label"
+            :disabled="Boolean(item.disabled)"
+            size="mini"
+          >
+            <el-option
+              v-for="item in getItemEnums(item)"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+          <!-- 数值 -->
+          <el-input-number
+            v-else-if="item.apiBaseType === 'number'"
+            v-model="scope.row[item.prop]"
+            :min="item.minimum || undefined"
+            :max="item.maximum || undefined"
+            :maxlength="item.maxLength || undefined"
+            :minlength="item.minLength || undefined"
+            :disabled="Boolean(item.disabled)"
+            :placeholder="item.placeholder || '请输入' + item.label"
+            @change="changeValue(item.prop,item,$event)"
+            @clear="clearValue(item.prop,$event)"
+            size="mini"
+          ></el-input-number>
+          <!-- 文本值 -->
+          <el-input 
+            v-else
+            v-model="scope.row[item.prop]"
+            :placeholder="item.placeholder || '请输入' + item.label"
+            :disabled="Boolean(item.disabled)"
+            size="mini"
+          ></el-input>
+        </div>
+      </template>
+    </u-table-column>
+    </template>
     <!-- 操作列 （左侧）-->
     <u-table-column
       v-if="buttonOperationList_left"
@@ -29,7 +135,7 @@
       :header-align="'center'"
     >
       <template #header>
-        <span>操作</span>
+        <span>{{ $t('common.handle') }}</span>
       </template>
       <template slot-scope="scope">
         <el-button
@@ -51,7 +157,7 @@
       :header-align="'center'"
     >
       <template #header>
-        <span>操作</span>
+        <span>{{ $t('common.handle') }}</span>
       </template>
       <template slot-scope="scope">
         <el-button
@@ -60,312 +166,11 @@
           :key="indexButton"
           type="text"
           size="mini"
+          :style="{color:itemButton.color || '#409EFF'}"
           @click="buttonOperationClick_right(scope.row, itemButton, indexButton)"
         >{{itemButton.label}}</el-button>
       </template>
     </u-table-column>
-    <u-table-column v-if="selectionTable" fixed="left" type="selection" :reserve-selection="true" />
-    <u-table-column v-if="isShowIndex" type="index" fixed="left" label="序号" width="50" />
-    <template v-for="(item, index) in TableSize">
-    <u-table-column
-      min-width="150"
-      :key="index"
-      :prop="item.showProp ? item.prop + '.' + item.showProp : item.prop"
-      :sortable="item.sortable"
-      :fixed="setItemFixed(item,index)"
-      :show-overflow-tooltip="showOverflowTooltip"
-      :width="item.width"
-      :align="item.tableAlign"
-      :header-align="item.tableHeaderAlign"
-      v-if="item.istrue==null?true:item.istrue"
-    >
-      <template #header>
-        <span>{{ item.label }}</span>
-        <i style="color: #f56c6c" v-if="item.rules && requiredRules">*</i>
-      </template>
-      <template slot-scope="scope">
-        <el-form>
-        <el-form-item
-          v-if="item.type == 'input'"
-          :onkeyup="itemOnKeyUp(item,searchData[item.prop])"
-          :prop="'details.' + scope.$index + '.' + item.prop"
-          :rules="item.rules"
-        >
-          <el-input
-            :placeholder="'请输入' + item.label"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            v-model="scope.row[item.prop]"
-            @blur="
-              inputPlaceholder($event, item, 'blur',scope.row)
-            "
-            @focus="inputPlaceholder($event, item, 'focus')"
-            clearable
-          >
-          </el-input>
-        </el-form-item>
-        <!-- 输入框(数字) onkeyup: 正则表达式，用于前端输入校验工作-->
-        <el-form-item
-          v-if="item.type == 'inputNumber'"
-          :prop="'details.' + scope.$index + '.' + item.prop"
-          :rules="item.rules"
-        >
-          <el-input
-            v-model="searchData[item.prop]"
-            :maxlength="item.maxlength"
-            :onkeyup="typeNumberOnkeyup(item,searchData[item.prop])"
-            clearable
-            :disabled="Boolean(item.disabled)"
-            :placeholder="'请输入' + item.label"
-            :prefix-icon="item.icon"
-            :show-password="item.showPassword"
-            @change="changeInput(item.prop,$event)"
-            @clear="clearInput(item.prop,$event)"
-            @blur="
-              inputPlaceholder($event, item, 'blur',searchData)
-            "
-            @focus="inputPlaceholder($event, item, 'focus')"
-          ></el-input>
-        </el-form-item>
-        <el-form-item
-          v-if="item.type == 'objectInput'"
-          :prop="
-            'details.' + scope.$index + '.' + item.prop + '.' + item.showProp
-          "
-          :rules="item.rules"
-        >
-          <el-input
-            :placeholder="'请输入' + item.label"
-            v-model="scope.row[item.prop][item.showProp]"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            @blur="
-              inputPlaceholder($event, item, 'blur', scope.row)
-            "
-            @focus="inputPlaceholder($event, item, 'focus')"
-            clearable
-          >
-          </el-input>
-        </el-form-item>
-        <!-- 下拉框 -->
-        <el-select
-          v-if="item.type === 'select'"
-          v-model="scope.row[item.prop]"
-          :loading="selectLoading"
-          :clearable="item.clearable"
-          :multiple="item.multiple"
-          :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-          :filterable="item.filterable"
-          :allow-create="item.allowCreate"
-          style="width: 100%"
-          :placeholder="'请输入' + item.label"
-        >
-          <el-option
-            v-for="(op, index) in selectOptions(item.options) ||
-            searchOptions['options']"
-            :label="op[item.optionsLabel] || op.label"
-            :value="op[item.optionsValue] || op.value"
-            :key="index"
-          ></el-option>
-        </el-select>
-        <!--对象下拉框 -->
-        <el-select
-          v-if="item.type === 'objectSelect'"
-          v-model="scope.row[item.prop][item.showProp]"
-          :loading="selectLoading"
-          :clearable="item.clearable"
-          :multiple="item.multiple"
-          :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-          :filterable="item.filterable"
-          :allow-create="item.allowCreate"
-          style="width: 100%"
-          :placeholder="'请输入' + item.label"
-        >
-          <el-option
-            v-for="(op, index) in selectOptions(item.options) ||
-            searchOptions['options']"
-            :label="op[item.optionsLabel] || op.label"
-            :value="op[item.optionsValue] || op.value"
-            :key="index"
-          ></el-option>
-        </el-select>
-        <!--查询下拉-->
-        <el-form-item
-          v-if="item.type === 'autocomplete'"
-          :prop="'details.' + scope.$index + '.' + item.prop"
-          :rules="item.rules"
-        >
-          <el-autocomplete
-            class="inline-input"
-            style="width: 100%"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            v-model="scope.row[item.prop]"
-            :fetch-suggestions="
-              (queryString, cb) => {
-                querySearch(queryString, cb, item, scope);
-              }
-            "
-            :placeholder="'请输入' + item.label"
-            @select="handleSelect($event, item, scope)"
-          >
-            <!-- <template slot-scope="{item}">
-                 <div class="name" style="color:green">{{item.value = item.name}}</div>
-                 <div class="name" >{{item.address = item.code}}</div>
-            </template> -->
-            <el-button
-              v-if="item.click"
-              slot="append"
-              icon="el-icon-search"
-              @click="item.click({ scope, item })"
-              style="color: #1890ff; background-color: #ffffff"
-            ></el-button>
-          </el-autocomplete>
-        </el-form-item>
-        <!-- 对象查询下拉 -->
-        <el-form-item
-          v-if="item.type === 'objectAutocomplete'"
-          :prop="
-            'details.' + scope.$index + '.' + item.prop + '.' + item.showProp
-          "
-          :rules="item.rules"
-        >
-          <el-autocomplete
-            class="inline-input"
-            style="width: 100%"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            v-model="scope.row[item.prop][item.showProp]"
-            :fetch-suggestions="
-              (queryString, cb) => {
-                querySearch(queryString, cb, item, scope);
-              }
-            "
-            :placeholder="'请输入' + item.label"
-            @select="handleSelect($event, item, scope)"
-          >
-            <!-- <template slot-scope="{item}">
-                 <div class="name" style="color:green">{{item.value = item.name}}</div>
-                 <div class="name" >{{item.address = item.code}}</div>
-            </template> -->
-            <el-button
-              v-if="item.click"
-              slot="append"
-              icon="el-icon-search"
-              @click="item.click({ scope, item })"
-              style="color: #1890ff; background-color: #ffffff"
-            ></el-button>
-          </el-autocomplete>
-        </el-form-item>
-        <!-- <el-form-item v-if="item.type == 'inputEnum'" :prop="item.prop">
-          <el-input
-            placeholder="请输入内容"
-            v-model="scope.row[item.prop]"
-            clearable
-          >
-          </el-input>
-        </el-form-item> -->
-
-        <el-form-item
-          v-if="item.type == 'dateTimeInput'"
-          :prop="'details.' + scope.$index + '.' + item.prop"
-          :rules="item.rules"
-        >
-          <el-date-picker
-            type="datetime"
-            v-model="scope.row[item.prop]"
-            placeholder="选择日期"
-            style="width: 100%"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            value-format="yyyy-MM-ddTHH:mm:ss.sssZ"
-            format="yyyy-MM-dd"
-          ></el-date-picker>
-        </el-form-item>
-        <el-form-item
-          v-if="item.type == 'objectDateTimeInput'"
-          :prop="'details.' + scope.$index + '.' + item.prop + '.' + item.showProp"
-          :rules="item.rules"
-        >
-          <el-date-picker
-            type="datetime"
-            v-model="scope.row[item.prop][item.showProp]"
-            placeholder="选择日期"
-            style="width: 100%"
-            :disabled="Boolean(item.disabled) || Boolean(scope.row['disabled'])"
-            value-format="yyyy-MM-ddTHH:mm:ss.sssZ"
-            format="yyyy-MM-dd"
-          ></el-date-picker>
-        </el-form-item>
-        <!-- table表添加按钮事件 v-show="scope.row.number == 'PRJ202210060001'" -->
-        <!-- <el-form-item v-if="item.type == 'button'" > -->
-          <div v-if="item.type == 'button'">
-            <el-button
-              v-show="scope.row[item.prop]==undefined?true:false"
-              type="primary"
-              size="mini"
-              @click="buttonClick(scope.row, scope.$index, item.label)"
-            >{{item.label}}</el-button>
-          </div>
-        <!-- </el-form-item> -->
-
-        <span v-if="item.type == 'object'">
-          {{ scope.row[item.prop] ? scope.row[item.prop][item.showProp] : "" }}
-        </span>
-        <span v-if="item.type == 'objectDateTime'">
-          {{ scope.row[item.prop]? scope.row[item.prop][item.showProp]: "" | formatDate }}
-        </span>
-        <span v-if="item.type == 'dateTime'">
-          {{ scope.row[item.prop] | formatDate }}
-        </span>
-        <!-- 调用主表信息 -->
-        <span v-else-if="item.type && item.type == 'outerMainFilter'">
-          {{ propsData[item.showProp] }}
-        </span>
-        <el-tag
-          v-if="item.type == 'tagFilter'"
-          :effect="'dark'"
-          size="medium"
-          class="tagFilterTypeDarkItem"
-          :color="scope.row[item.prop] | trigger(item.filters, 'background')"
-        >
-          {{ scope.row[item.prop] | trigger(item.filters, "label") }}
-        </el-tag>
-        <span
-          v-if="item.type == 'filter'"
-          :style="scope.row[item.prop]"
-        >
-          {{ scope.row[item.prop] | trigger(item.filters, "label", item.dictType) }}
-        </span>
-        <span
-          v-if="item.type == 'objectFilter'"
-          :style="scope.row[item.prop][item.showProp]"
-        >
-          {{ scope.row[item.prop][item.showProp] | trigger(item.filters, "label") }}
-        </span>
-        <span v-else-if="item.type == 'filterList'" >
-          {{ scope.row[item.prop] | triggerList(item.filters, "label") }}
-        </span>
-        <!-- 可点出详情 -->
-        <span
-          v-if="item.type == 'showDetail'"
-          @click="showDetailInfo(scope.row[item.prop])"
-          style="cursor: pointer;"
-          :title="'点击查看详情'"
-          :class="{ showDetailHover: item.type == 'showDetail' }"
-        >{{ scope.row[item.prop]  ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span>
-        <!-- 可点出json转换的table弹窗 -->
-        <span
-          v-if="item.type == 'showJsonTable'"
-          @click="showJsonTable(scope.row[item.prop])"
-          style="cursor: pointer;"
-          :title="'点击查看详情'"
-          :class="{ showDetailHover: item.type == 'showJsonTable' }"
-        >{{ scope.row[item.prop]  ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span>
-        <span
-          v-if="item.type == 'name' || !item.type"
-          @click="item.type == 'name' && inlineDialog(scope.row)"
-          :class="{ spamHover: item.type == 'name' }"
-        >{{ scope.row[item.prop]  ? scope.row[item.prop] + "" : scope.row[item.prop] }}</span>
-      </el-form>
-      </template>
-    </u-table-column>
-    </template>
     <slot></slot>
 
     <!-- 点开查看全部弹窗 -->
@@ -379,7 +184,14 @@
       :close-on-click-modal="true"
       :close-on-press-escape="true"
     >
-      {{ showDetailData ? showDetailData + "" : showDetailData }}
+      <el-input
+        type="textarea"
+        readonly
+        autosize
+        resize="none"
+        v-model="showDetailData">
+      </el-input>
+      <!-- {{ showDetailData ? showDetailData + "" : showDetailData }} -->
     </el-dialog>
 
     <!-- json弹窗 -->
@@ -398,7 +210,7 @@
         type="textarea"
         readonly
         autosize
-        placeholder="请输入内容"
+        resize="none"
         v-model="showJsonData_str">
       </el-input>
     </el-dialog>
@@ -412,12 +224,28 @@
       :close-on-click-modal="true"
       :close-on-press-escape="true"
       :title="'内容详情'"
+      width="80%"
     >
       <el-button 
         @click="copyJsonHandle()" 
         type="primary" 
         style="margin-bottom: 10px;float: right;"
       >复制JSON</el-button>
+      <!-- <el-table
+        :data="showJsonData_str"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column
+          v-for="(item,key) in showJsonHeader"
+        >
+          <template #header>
+            <span>{{ item }}</span>
+          </template>
+          <template slot-scope="scope">
+          </template>
+        </el-table-column>
+      </el-table> -->
       <el-table
         :data="showJsonData"
         :border="true"
@@ -435,19 +263,46 @@
             <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
             <el-table
               v-else
-              height="300"
               :data="scope.row.value"
+              stripe
               :border="true"
-              style="width: 100%">
-              <el-table-column
-                prop="name"
-                label="子属性"
-              ></el-table-column>
+              style="width: 100%"
+              height="300"
+            >
               <el-table-column
-                label="子值"
-                prop="value"
-              ></el-table-column>
+                v-for="(head,h_key) in showJsonHeader"
+                :key="h_key"
+                min-width="120"
+              >
+                <template #header>
+                  <span :title="head">{{ head }}</span>
+                </template>
+                <template slot-scope="scope2">
+                  <div v-if="typeof scope2.row[head] == 'object'">
+                    <div v-for="(o,o_key) in scope2.row[head]">
+                      {{ o_key }}：{{ o }}
+                      <div style="border-bottom: dashed 1px #ddd;"></div>
+                    </div>
+                  </div>
+                  <div v-else>{{ scope2.row[head] }}</div>
+                </template>
+              </el-table-column>
             </el-table>
+            <!-- <el-table
+              v-else
+              height="300"
+              :data="scope.row.value"
+              :border="true"
+              style="width: 100%">
+                <el-table-column
+                  prop="name"
+                  label="子属性"
+                ></el-table-column>
+                <el-table-column
+                  label="子值"
+                  prop="value"
+                ></el-table-column>
+            </el-table> -->
           </template>
         </el-table-column>
       </el-table>
@@ -469,6 +324,11 @@ export default {
     },
   },
   props: {
+    // table内表单数据是否可编辑
+    isEditable:{
+      type: Boolean,
+      default: false
+    },
     // 操作列按钮（左侧）
     buttonOperationList_left:{
       type: Array,
@@ -574,6 +434,7 @@ export default {
       showDetailDialog:false,//点开查看全部弹窗
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
+      showJsonHeader:null,//点开查看Json的header
       showJsonData:null,//点开查看Json的数据
       showJsonData_str:null,//复制的Json字符串
       showJsonCopy:false,//复制json的Dialog显隐控制
@@ -636,6 +497,10 @@ export default {
       let _height = height || this.setUTableHeight
       let _app_height = document.getElementsByClassName('app-main')[0].clientHeight
       this.uTableHeight = Number(_app_height) - Number(_height)
+      this.$nextTick(() => {
+        this.$refs.multipleTable.doLayout()
+        this.$refs.multipleTable.$forceUpdate()
+      });
     },
     // 获取表格高度 误删 业务当中有用
     getTableHeight(){
@@ -843,15 +708,16 @@ export default {
       this.$emit("inlineDialog", row);
     },
     //可点出详情弹窗
-    showDetailInfo(row) {
+    showDetailInfo(row,type) {
       this.showDetailDialog = true
-      this.showDetailData = row
-      this.$emit("showDetailInfo", row);
+      this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : row
+      this.$emit("showDetailInfo", this.showDetailData);
     },
     // 可点出json转换的table弹窗
     showJsonTable(row){
       this.showJsonDialog = true
       let _json = eval('(' + row + ')')
+      this.showJsonData_str = JSON.stringify(_json, null, '\t')//复制使用
       let _arr = []
       let __initJson = (data) => {
         let _init = []
@@ -864,50 +730,80 @@ export default {
         // 直接输出
         if(!_json[item]){
           _arr.push({name:item,value:_json[item]})
-        }else if(_json[item] && typeof _json[item] != 'object'){
-          _arr.push({name:item,value:_json[item] + ""})
         }else{
-          // 如果是数组
-          if(Array.isArray(_json[item])){
-            //  如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式
-            let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
-            _arr.push({name:item,value:_value})
-          }
-          // 如果是对象
-          else{           
-            let _obj_arr = __initJson(_json[item]) 
-            // 对象有数据
-            if(_obj_arr.length > 0){
-              _arr = [..._obj_arr]
-            }else{
-              // 空对象
-              _arr.push({name:item,value:""})
+          if(typeof _json[item] != 'object'){
+            _arr.push({name:item,value:_json[item] + ""})
+          }else{
+              // 如果是数组
+            if(Array.isArray(_json[item])){
+              //  如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式
+              // let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
+              this.showJsonHeader = []
+              for(let h in _json[item][0]){
+                this.showJsonHeader.push(h)
+              }
+              let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",")
+              _arr.push({name:item,value:_value})
+            }
+            // 如果是对象
+            else{    
+              let _obj_arr = __initJson(_json[item]) 
+              // 对象有数据
+              if(_obj_arr.length > 0){
+                _arr = [..._obj_arr]
+              }else{
+                // 空对象
+                _arr.push({name:item,value:""})
+              }
             }
           }
         }
       }
       this.showJsonData = _arr
-      this.showJsonData_str = JSON.stringify(JSON.parse(JSON.stringify(this.showJsonData)), null, '\t')
       this.$emit("showJsonTable", row);
     },
     // 复制Json按钮
     copyJsonHandle(){
       this.showJsonCopy = true
-      navigator.clipboard.writeText(this.showJsonData_str)
-        .then(() => {
-          this.$message.success('复制成功');
-        })
-        .catch(err => {
-          this.$message.error('复制失败');
-        });
-      this.$nextTick(()=>{
-        if(this.$refs.copyJsonTextarea_ref){
-          this.$refs.copyJsonTextarea_ref.focus()
-          this.$nextTick(()=>{
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(this.showJsonData_str)
+          .then(() => {
+            this.$message.success('复制成功');
+            this.$refs.copyJsonTextarea_ref.focus()
             document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
           })
-        }
-      })
+          .catch(err => {
+            this.$message.error('复制失败');
+            this.$refs.copyJsonTextarea_ref.focus()
+            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+          });
+      }else {
+        // 创建text area
+        const textArea = document.createElement('textarea')
+        textArea.value = this.showJsonData_str
+        // 使text area不在viewport，同时设置不可见
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        return new Promise((resolve, reject) => {
+            // 执行复制命令并移除文本框
+            document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
+            textArea.remove()
+        }).then(() => {
+          this.$nextTick(()=>{
+            if(this.$refs.copyJsonTextarea_ref){
+              this.$message.success('复制成功');
+              this.$refs.copyJsonTextarea_ref.focus()
+              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+            }
+          })
+        },() => {
+          this.$message.error('复制失败');
+          this.$refs.copyJsonTextarea_ref.focus()
+          document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
+        })
+      }
+      
     },
     //点击按钮打开自定义弹窗
     buttonClick(row, index, label) {
@@ -921,6 +817,61 @@ export default {
     buttonOperationClick_right(row, item, index) {
       this.$emit("buttonOperationClick_right", row, item, index);
     },
+    // 转义枚举值
+    initApiEnumList(item,data){
+      let _item_enumList = {}
+      item.enums_list.forEach((item,key)=>{
+        _item_enumList[item.value] = item.label
+      })
+      return _item_enumList[data] || '未定义'
+    },
+    // 其他类型转义，直接显示 | 点击可出详情 | 点击可点出json
+    initApiOtherType(data){
+      try {
+        let _json = JSON.parse(data)
+        // 数值类型
+        if(typeof _json == 'number' && _json){
+          return [data,'show']
+        }else{
+          return [data,'json']
+        }
+      }
+      // 直接显示
+      catch(err){
+        return [data,'detail']
+      }
+    },
+    // 判断操作
+    showTypeHandle(type,row){
+      if(type == 'detail')this.showDetailInfo(row)
+      if(type == 'json')this.showJsonTable(row)
+    },
+    // 可编辑表单：获取枚举、布尔
+    getItemEnums(item){
+      let _option = []
+      // 布尔
+      if(item.apiBaseType == 'boolean'){
+        _option = [{
+          value: true,
+          label: '是'
+        },{
+          value: false,
+          label: '否'
+        },]
+      }
+      if(item.isEnums){
+        _option = item.enums_list
+      }
+      return _option
+    },
+    // 可编辑表单：值更改函数
+    changeValue(prop,item,val) {
+      this.$emit("changeValue", prop, item, val)
+    },
+    // 可编辑表单：值清除函数
+    clearValue(prop,item,val) {
+      this.$emit("clearValue", prop, item, val)
+    },
   },
 };
 </script>
@@ -938,8 +889,8 @@ export default {
 }
 ::v-deep .el-table__fixed {
   display: block-inline !important;
-  height: auto !important;
-  bottom: 13px !important;
+  height: 100% !important;
+  // bottom: 13px !important;
   .el-table__fixed-header-wrapper {
     z-index: auto !important;
   }
@@ -993,4 +944,8 @@ span {
 .u-table::before {
   height: 0px;
 }
+
+.itemSpan{
+  white-space: nowrap !important
+}
 </style>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/components/umyTable/index.vue b/PC/InterFace.Dash/src/components/umyTable/index.vue
index 2e62716..5df6312 100644
--- a/PC/InterFace.Dash/src/components/umyTable/index.vue
+++ b/PC/InterFace.Dash/src/components/umyTable/index.vue
@@ -175,6 +175,7 @@
 
     <!-- 点开查看全部弹窗 -->
     <el-dialog 
+      id="copyDetailInput_dialog_ref"
       :visible.sync="showDetailDialog"
       width="35%"
       :modal-append-to-body="false"
@@ -185,6 +186,7 @@
       :close-on-press-escape="true"
     >
       <el-input
+        ref="copyDetailInput_ref"
         type="textarea"
         readonly
         autosize
@@ -194,127 +196,23 @@
       <!-- {{ showDetailData ? showDetailData + "" : showDetailData }} -->
     </el-dialog>
 
-    <!-- json弹窗 -->
-    <el-dialog
-      id="copyJsonTextarea_dialog_ref"
-      :visible.sync="showJsonCopy"
-      :modal-append-to-body="false"
-      :append-to-body="true"
-      :show-close="true"
-      :close-on-click-modal="true"
-      :close-on-press-escape="true"
-      :title="'JSON详情'"
-    >
-      <el-input
-        ref="copyJsonTextarea_ref"
-        type="textarea"
-        readonly
-        autosize
-        resize="none"
-        v-model="showJsonData_str">
-      </el-input>
-    </el-dialog>
+    <!-- 查看Json -->
+    <showCopyJsonPop
+      v-if="showJsonDialog"
+      :JsonData="showJsonData"
+      @closePop="closeJsonPop"
+    ></showCopyJsonPop>
 
-    <!-- 点开查看Json转换后table弹窗 -->
-    <el-dialog 
-      :visible.sync="showJsonDialog"
-      :modal-append-to-body="false"
-      :append-to-body="true"
-      :show-close="true"
-      :close-on-click-modal="true"
-      :close-on-press-escape="true"
-      :title="'内容详情'"
-      width="80%"
-    >
-      <el-button 
-        @click="copyJsonHandle()" 
-        type="primary" 
-        style="margin-bottom: 10px;float: right;"
-      >复制JSON</el-button>
-      <!-- <el-table
-        :data="showJsonData_str"
-        stripe
-        style="width: 100%"
-      >
-        <el-table-column
-          v-for="(item,key) in showJsonHeader"
-        >
-          <template #header>
-            <span>{{ item }}</span>
-          </template>
-          <template slot-scope="scope">
-          </template>
-        </el-table-column>
-      </el-table> -->
-      <el-table
-        :data="showJsonData"
-        :border="true"
-        style="width: 100%">
-        <el-table-column
-          prop="name"
-          width="220"
-          label="属性">
-        </el-table-column>
-        <el-table-column
-          label="值"
-        >
-          <template slot-scope="scope">
-            <!-- DETAILS todo:DETAILS判断条件需要优化，使用传参的方式 -->
-            <span v-if="(scope.row.name).toUpperCase() != 'DETAILS'">{{scope.row.value}}</span>
-            <el-table
-              v-else
-              :data="scope.row.value"
-              stripe
-              :border="true"
-              style="width: 100%"
-              height="300"
-            >
-              <el-table-column
-                v-for="(head,h_key) in showJsonHeader"
-                :key="h_key"
-                min-width="120"
-              >
-                <template #header>
-                  <span :title="head">{{ head }}</span>
-                </template>
-                <template slot-scope="scope2">
-                  <div v-if="typeof scope2.row[head] == 'object'">
-                    <div v-for="(o,o_key) in scope2.row[head]">
-                      {{ o_key }}：{{ o }}
-                      <div style="border-bottom: dashed 1px #ddd;"></div>
-                    </div>
-                  </div>
-                  <div v-else>{{ scope2.row[head] }}</div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <!-- <el-table
-              v-else
-              height="300"
-              :data="scope.row.value"
-              :border="true"
-              style="width: 100%">
-                <el-table-column
-                  prop="name"
-                  label="子属性"
-                ></el-table-column>
-                <el-table-column
-                  label="子值"
-                  prop="value"
-                ></el-table-column>
-            </el-table> -->
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
   </u-table>
 </template>
 <script>
 import { formatTimeStrToStr } from "@/utils/formatTime";
 import _ from "lodash";
 import { getMatchRegConformValue } from "@/utils/index"
+import showCopyJsonPop from "@/components/showCopyJsonPop"
 export default {
   name: "currenTable",
+  components:{ showCopyJsonPop },
   filters: {
     formatDate(time) {
       if (time == null) {
@@ -434,10 +332,7 @@ export default {
       showDetailDialog:false,//点开查看全部弹窗
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
-      showJsonHeader:null,//点开查看Json的header
       showJsonData:null,//点开查看Json的数据
-      showJsonData_str:null,//复制的Json字符串
-      showJsonCopy:false,//复制json的Dialog显隐控制
     };
   },
   computed: {
@@ -710,100 +605,22 @@ export default {
     //可点出详情弹窗
     showDetailInfo(row,type) {
       this.showDetailDialog = true
-      this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : row
+      let _row = typeof row == 'object' ? JSON.stringify(row, null, '\t') : row
+      this.showDetailData = type == 'time' ? formatTimeStrToStr(row) : _row
       this.$emit("showDetailInfo", this.showDetailData);
+      this.$nextTick(()=>{
+        this.$refs.copyDetailInput_ref.focus()
+        document.getElementById('copyDetailInput_dialog_ref').scrollTop = 0
+      })
+    },
+    closeJsonPop(){
+      this.showJsonDialog = false
     },
     // 可点出json转换的table弹窗
     showJsonTable(row){
       this.showJsonDialog = true
       let _json = eval('(' + row + ')')
-      this.showJsonData_str = JSON.stringify(_json, null, '\t')//复制使用
-      let _arr = []
-      let __initJson = (data) => {
-        let _init = []
-        for(let item in data){
-          _init.push({name:item,value:data[item]})
-        }
-        return _init
-      }
-      for(let item in _json){
-        // 直接输出
-        if(!_json[item]){
-          _arr.push({name:item,value:_json[item]})
-        }else{
-          if(typeof _json[item] != 'object'){
-            _arr.push({name:item,value:_json[item] + ""})
-          }else{
-              // 如果是数组
-            if(Array.isArray(_json[item])){
-              //  如果是 DETAILS todo:DETAILS判断条件需要优化，使用传参的方式
-              // let _value = (item).toUpperCase() == 'DETAILS' ? __initJson(_json[item][0]) : (_json[item]).join(",")
-              this.showJsonHeader = []
-              for(let h in _json[item][0]){
-                this.showJsonHeader.push(h)
-              }
-              let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",")
-              _arr.push({name:item,value:_value})
-            }
-            // 如果是对象
-            else{    
-              let _obj_arr = __initJson(_json[item]) 
-              // 对象有数据
-              if(_obj_arr.length > 0){
-                _arr = [..._obj_arr]
-              }else{
-                // 空对象
-                _arr.push({name:item,value:""})
-              }
-            }
-          }
-        }
-      }
-      this.showJsonData = _arr
-      this.$emit("showJsonTable", row);
-    },
-    // 复制Json按钮
-    copyJsonHandle(){
-      this.showJsonCopy = true
-      if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(this.showJsonData_str)
-          .then(() => {
-            this.$message.success('复制成功');
-            this.$refs.copyJsonTextarea_ref.focus()
-            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-          })
-          .catch(err => {
-            this.$message.error('复制失败');
-            this.$refs.copyJsonTextarea_ref.focus()
-            document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-          });
-      }else {
-        // 创建text area
-        const textArea = document.createElement('textarea')
-        textArea.value = this.showJsonData_str
-        // 使text area不在viewport，同时设置不可见
-        document.body.appendChild(textArea)
-        textArea.focus()
-        textArea.select()
-        return new Promise((resolve, reject) => {
-            // 执行复制命令并移除文本框
-            document.execCommand('copy') ? resolve() : reject(new Error('出错了'))
-            textArea.remove()
-        }).then(() => {
-          this.$nextTick(()=>{
-            if(this.$refs.copyJsonTextarea_ref){
-              this.$message.success('复制成功');
-              this.$refs.copyJsonTextarea_ref.focus()
-              document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-            }
-          })
-        },() => {
-          this.$message.error('复制失败');
-          this.$refs.copyJsonTextarea_ref.focus()
-          document.getElementById('copyJsonTextarea_dialog_ref').scrollTop = 0
-        })
-      }
-      
+      this.showJsonData = _json
     },
     //点击按钮打开自定义弹窗
     buttonClick(row, index, label) {