明细添加查看详情

Code/Fe/src/components/commonTabel-drawer/index.vue

@@ -66,23 +66,15 @@
             :propsData="propsData"
           >
           </curren-descriptions>
-          <!-- todo-new 代码整理-->
+          <!-- 明细头部按钮 -->
           <div 
             class="currenTabel-drawer-mx-header" 
             v-if="scope.value == 'mx' && (showDetailColumnsSet || showDetailFilters)"
           >
-            <el-button 
+            <curren-Button
-              v-if="showDetailColumnsSet"
+              :Butttondata="detailHeaderButton"
-              class="rowDropNotHideItem"
+              @tableButtonClick="detailHeaderClick"
-              @click="columnsSettingHandle()"
+            ></curren-Button>
-              size="mini"
-            >字段设置</el-button>
-            <el-button 
-              type="primary"
-              v-if="showDetailFilters"
-              @click="detailFiltersHandle()"
-              size="mini"
-            >筛选</el-button>
           </div>
           <!-- 字段设置弹窗 -->
           <rowDrop 
@@ -125,6 +117,8 @@
             @handleSelectionChange="handleSelectionChange"
             @inlineDialog="inlineDialog"
             @buttonClick="buttonClick"
+            :buttonOperationList="buttonOperationList"
+            @buttonOperationClick="buttonOperationClick"
           >
             <template>
               <slot></slot>
@@ -209,6 +203,28 @@
     <div class="drawer-Shut" @click="drawerShut">
       <el-button type="danger" size="mini">关闭</el-button>
     </div>
+    <!-- 明细-查看详情 -->
+    <el-dialog 
+      width="90%"
+      :modal-append-to-body="false"
+      :append-to-body="false"
+      :title="detailInfoTitle" 
+      :visible.sync="displayDialog.detailInfoDialog"
+      :show-close="true"
+    >
+      <div>
+          <curren-descriptions
+              v-if="detailInfoTableData"
+              border
+              :column="column"
+              :direction="direction"
+              :colon="false"
+              :tabsDesTions="tableColumns"
+              :propsData="detailInfoTableData"
+              style="padding-bottom: 20px;"
+          ></curren-descriptions>
+      </div>
+    </el-dialog>
   </el-drawer>
 </template>
 <script>
@@ -223,6 +239,8 @@ import currenTable from "@/components/currenTable"
 import pagination from "@/components/Pagination"
 import rowDrop from "@/components/rowDrop/index.vue"
 import { getParentNode } from '@/utils'
+import * as allUrlOption from '@/utils/baseData/urlOption'
+import { LoadingMixins } from "@/mixins/LoadingMixins";
 export default {
   name: 'currenTabel-drawer',
   components: {
@@ -234,7 +252,15 @@ export default {
     searchOverall,
     rowDrop
   },
+  mixins: [
+    LoadingMixins,
+  ],
   props: {
+    // 操作列按钮
+    buttonOperationList:{
+      type: Array,
+      default: null,
+    },
     // 是否显示明细-字段设置
     showDetailColumnsSet:{
       type: Boolean,
@@ -381,6 +407,7 @@ export default {
     },
   },
   mounted () {
+    this.initDetailHeaderButton()
     // 点击外部，字段设置弹窗隐藏
     document.addEventListener('click',(e)=>{
       if(!this.rowDropVisible)return
@@ -395,6 +422,9 @@ export default {
   },
   data () {
     return {
+      detailHeaderButton:null,//明细-上方按钮
+      detailInfoTableData:null,//明细-查看详情弹窗数据
+      detailInfoTitle:null,//明细-查看详情弹窗title
       // table 重新渲染所需key
       isUpdate: false,
       // 明细-字段设置是否显示
@@ -428,6 +458,37 @@ export default {
     }
   },
   methods: {
+    // 初始化明细-上方按钮
+    initDetailHeaderButton(){
+      this.detailHeaderButton = []
+      if(this.showDetailColumnsSet){this.detailHeaderButton.push(this.defaultFieldSettingBtn())}
+      if(this.showDetailFilters){this.detailHeaderButton.push(this.defaultFilterBtn())}
+    },
+    detailHeaderClick(val,item){
+      // 字段设置
+      if(val == 'field'){
+        this.columnsSettingHandle()
+      }
+      // 筛选
+      if(val == 'filter'){
+        this.detailFiltersHandle()
+      }
+    },
+    // 关闭明细-详情弹窗
+    closeDetailInfo(val){
+      this.displayDialog.detailInfoDialog = val || false
+    },
+    // 明细-操作列事件
+    buttonOperationClick(row, item, index){
+      // 查看详情
+      if(item.name == "info"){
+        this.displayDialog.detailInfoDialog = true
+        this.detailInfoTableData = row
+        let _name = allUrlOption[this.$route.name].detailInfoName
+        this.detailInfoTitle = _name ? row[_name] + ' 详情' : '详情'
+      }
+      this.$emit('buttonOperationClick',row, item, index)
+    },
     rowDrop(data,type) {
       this.$emit('rowDrop',data,type)
       this.isUpdate = !this.isUpdate
@@ -456,6 +517,7 @@ export default {
       this.$emit('handleCommand', command)
     },
     drawerShut () {
+      this.closeDetailInfo(false)
       this.$emit('drawerShut', false)
     },
     tableButtonClick (val) {

Code/Fe/src/mixins/LoadingMixins.js

@@ -21,6 +21,7 @@ export const LoadingMixins = {
         importDialog: false, //导入
         exportDialog: false, //导出
         handleFromDialog: false, //执行生成
+        detailInfoDialog:false,//明细-查看详情弹窗
       },
     }
   }

Code/Fe/src/mixins/TableMixins.js

@@ -104,6 +104,7 @@ export const tableMixins = {
     },
     //点击Table行内名称
     inlineDialog(val) {
+      if(this.$refs.currenDrawer_Ref)this.$refs.currenDrawer_Ref.closeDetailInfo()
       // 打开抽屉后，点击其他信息，默认回到详情位置上，避免特殊需要重新点击获取接口的tag页面数据不更新
       this.firstTabs = 'xq'
       //打开抽屉

Code/Fe/src/mixins/drawerMixins.js

@@ -28,6 +28,8 @@ export const drawerMixins = {
       propsData: {},
       URLOption_base:allUrlOption[this.$route.name].baseURL,
       URLOption_delete:allUrlOption[this.$route.name].deleteURL,
+      // 主表-明细-操作列
+      operationButtonsDetail:[{label:'查看详情',name:'info'}],
     }
   },
   methods: {

Code/Fe/src/utils/baseData/urlOption.js

@@ -2,6 +2,7 @@
 export const TestSchool = {
     baseURL:'TestSchool/base',//主表-列表
     detailURL:'app/test-school',//主表-明细 + 明细-查看主表
+    // detailInfoName:'asnNbr',//主表-明细查看详情的title名称
     detailListURL:'TestStudentDetail/base',//明细-列表,
     masterId:'masterId',//明细获取主表信息的masterId(默认)
     masterName:'studentName'//明细获取主表信息的title名称

Code/Fe/src/utils/defaultButtons.js

@@ -59,7 +59,7 @@ export function defaultFieldSettingBtn(option,source) {
         }
     }
     return __defaultBtnOption(option,{
-        type: _type,
+        // type: _type,//暂不处理颜色
         plain: true,
         icon: "el-icon-setting",
         label: "字段设置",

Code/Fe/src/views/interfaceBoard/TestSchool.vue

@@ -27,6 +27,7 @@
       :buttonOperationList="operationButtonsTable"
     ></tablePagination>
     <curren-Drawer
+      ref="currenDrawer_Ref"
       :title="apiColumns_DesTions"
       @rowDrop="rowDrop"
       :tableColumns="apiColumns_DetailsTable"
@@ -46,6 +47,7 @@
       :MaxResultCount="MaxResultCountDetails"
       @alterResultCountDetails="alterResultCountDetails"
       @alertoldSkipCountDetails="alertoldSkipCountDetails"
+      :buttonOperationList="operationButtonsDetail"
     ></curren-Drawer>
     <!-- 新增与编辑 -->
     <newAndEdiDialog