【埃驰-接口-new】表格参数为array类型处理及点击事件封装开发

PC/InterFace.New/src/components/arrayTableDialog/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 组件功能：查看json及复制 -->
+  <div class="arrayTableDialog">
+
+    <!-- 点开查看Json转换后table弹窗 -->
+    <el-dialog 
+      top="50px"
+      :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"
+      width="90%"
+      @close="closePop"
+    >
+      <template #title>
+        内容详情
+        <el-button 
+          size="mini"
+          @click="copyJsonHandle()" 
+          type="primary" 
+          style="margin-right: 30px;float: right;"
+        >复制数据</el-button>
+      </template>
+      <umyTable
+        :isShowIndex="true"
+        :tableBorder="true"
+        :setUTableHeight="170"
+        :row-key="null"
+        :tableData="arrTableData"
+        :tableColumns="arrTableColumns"
+        :selectionTable="false"
+      ></umyTable>
+    </el-dialog>
+    
+    <!-- json复制内容弹窗 -->
+    <el-dialog
+      top="50px"
+      :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="'数据详情'"
+    >
+      <el-input
+        class="copyJsonTextarea"
+        ref="copyJsonTextarea_ref"
+        type="textarea"
+        readonly
+        autosize
+        resize="none"
+        v-model="JsonCopyData"
+      ></el-input>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { LoadingMixins } from "@/mixins/LoadingMixins";
+import { tableMixins } from "@/mixins/TableMixins"
+export default {
+  name:"arrayTableDialog",
+  mixins:[ LoadingMixins,tableMixins ],
+  props: {
+    // Json数据
+    arrTableData:{
+      type: Array,
+      default: null,
+    },
+  },
+  data () {
+    return {
+      JsonTableShow:true,//点开查看Json转换后table弹窗
+      JsonTableData:null,//表格转义的json数据
+      JsonCopyData:null,//复制的Json字符串
+      JsonCopyShow:false,//复制数据的Dialog显隐控制
+      arrTableColumns:null,//表头
+    }
+  },
+  mounted(){
+    this.initData()
+  },
+  methods: {
+    // 数据转义
+    initData(){
+      // 列头转义
+      this.arrTableColumns = []
+      for(let i in this.arrTableData[0]){
+        this.arrTableColumns.push({
+          prop:i,
+          label:i
+        })
+      }
+      // 复制数据处理
+      this.JsonCopyData = JSON.stringify(this.arrTableData, null, '\t')
+    },
+    // 关闭整个弹窗
+    closePop() {
+      this.JsonTableShow = false
+      this.$emit("closePop")
+    },
+    // 复制后选择框处理
+    copyJsonInputHandle(type){
+      if(type == 'error')this.$message.error('复制失败');
+      if(type == 'success')this.$message.success('复制成功');
+      if(this.$refs.copyJsonTextarea_ref){
+        this.$refs.copyJsonTextarea_ref.focus()
+        this.$refs.copyJsonTextarea_ref.$refs.textarea.scrollTop = 0
+      }
+    },
+    // 复制数据按钮
+    copyJsonHandle(){
+      this.JsonCopyShow = true
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(this.JsonCopyData)
+          .then(() => {
+            this.copyJsonInputHandle('success')
+          })
+          .catch(err => {
+            this.copyJsonInputHandle('error')
+          });
+      }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(()=>{
+            this.copyJsonInputHandle('success')
+          })
+        },() => {
+            this.copyJsonInputHandle('error')
+        })
+      }
+      
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .copyJsonTextarea{
+  textarea{
+    max-height: calc(100vh - 220px) !important;
+    overflow: auto !important;
+  }
+}
+</style>

PC/InterFace.New/src/components/showCopyJsonPop/index.vue

@@ -197,7 +197,7 @@ export default {
               for(let h in _json[item][0]){
                 this.detailTableHeader.push(h)
               }
-              let _value = (item).toUpperCase() == 'DETAILS' ? _json[item] : (_json[item]).join(",")
+              let _value = ((item).toUpperCase() == 'DETAILS' || typeof _json[item] == 'object') ? _json[item] : (_json[item]).join(",")
               _arr.push({name:item,value:_value})
             }
             // 如果是对象

PC/InterFace.New/src/components/umyTable/index.vue

@@ -213,6 +213,13 @@
       @closePop="closeJsonPop"
     ></showCopyJsonPop>
 
+    <!-- 查看Array列表 -->
+    <arrayTableDialog
+      v-if="showArrayTableDialog"
+      :arrTableData="showArrayTableData"
+      @closePop="closeArrayTablePop"
+    ></arrayTableDialog>
+
   </u-table>
 </template>
 <script>
@@ -220,11 +227,12 @@ import { formatTimeStrToStr } from "@/utils/formatTime";
 import _ from "lodash";
 import { getMatchRegConformValue } from "@/utils/index"
 import showCopyJsonPop from "@/components/showCopyJsonPop"
+import arrayTableDialog from "@/components/arrayTableDialog"
 import permission from "@/directive/permission/index"
 export default {
   name: "currenTable",
   directives: { permission },
-  components:{ showCopyJsonPop },
+  components:{ showCopyJsonPop,arrayTableDialog },
   filters: {
     formatDate(time) {
       if (time == null) {
@@ -356,6 +364,8 @@ export default {
       showDetailData:null,//点开查看全部内容
       showJsonDialog:false,//点开查看Json转换后table弹窗
       showJsonData:null,//点开查看Json的数据
+      showArrayTableDialog:false,//点开查看array转换后table弹窗
+      showArrayTableData:null,//点开查看array的数据
     };
   },
   computed: {
@@ -660,12 +670,21 @@ export default {
     closeJsonPop(){
       this.showJsonDialog = false
     },
-    // 可点出json转换的table弹窗
+    closeArrayTablePop(){
+      this.showArrayTableDialog = false
+    },
+    // 可点出json转换的table弹窗（类型json）
     showJsonTable(row){
       this.showJsonDialog = true
       let _json = eval('(' + row + ')')
       this.showJsonData = _json
     },
+    // 可点出json转换的table弹窗（类型Array）
+    showArrayTable(row){
+      this.showArrayTableDialog = true
+      let _json = eval('(' + row + ')')
+      this.showArrayTableData = _json
+    },
     //点击按钮打开自定义弹窗
     buttonClick(row, index, label) {
       this.$emit("buttonClick", row, index, label);
@@ -693,12 +712,16 @@ export default {
       try {
         let _json = JSON.parse(data)
         // 数值类型
-        if(typeof _json == 'number' && _json){
+        if((typeof _json == 'number' || typeof _json == 'boolean') && (_json || _json == '0' || _json == 'false')){
           return [data,'show']
         }else{
+          if (Array.isArray(_json)) {
+            return [data,'array']
+          } else {
             return [data,'json']
           }
         }
+      }
       // 直接显示
       catch(err){
         return [data,'detail']
@@ -706,8 +729,10 @@ export default {
     },
     // 判断操作
     showTypeHandle(type,row){
+      console.log(732,type)
       if(type == 'detail')this.showDetailInfo(row)
       if(type == 'json')this.showJsonTable(row)
+      if(type == 'array')this.showArrayTable(row)
     },
     // 可编辑表单：值更改函数
     changeValue(prop,item,val) {

PC/InterFace.New/src/utils/baseData/urlOption.js

@@ -131,13 +131,11 @@ export const FromWms_PoDet = {
 //开始------------------只有主表 FromWms_PoMstr------------------ 
 
 export const FromWms_PoMstr = { 
-
     baseURL:'FromWms_PoMstr/base',//主表-列表 
-
     detailURL:'FromWms_PoMstr/Base/Get-By-Id',//主表-明细 + 明细-查看主表 
-
+    detailListURL:'FromWms_PoDet/Base',
+    masterId:'FromWms_PoMstrId',
     hasDetail:false 
-
 } 
 
 //结束------------------------------------ 
@@ -245,9 +243,7 @@ export const ToScp_Part = {
 export const ToScp_PoDet = { 
 
     baseURL:'ToScp_PoDet/base',//主表-列表 
-
     detailURL:'ToScp_PoDet/Base/Get-By-Id',//主表-明细 + 明细-查看主表 
-
     hasDetail:false 
 
 } 
@@ -261,9 +257,9 @@ export const ToScp_PoDet = {
 export const ToScp_PoMstr = { 
 
     baseURL:'ToScp_PoMstr/base',//主表-列表 
-
     detailURL:'ToScp_PoMstr/Base/Get-By-Id',//主表-明细 + 明细-查看主表 
-
+    detailListURL:'ToScp_PoDet/Base',
+    masterId:'ToScp_PoMstrId',
     hasDetail:false 
 
 }