Faster.Zheng.Winin/Code/Fe/src/components/commonTabel-drawer/index.vue

<template>
  <el-drawer
    v-loading="DrawerLoading"
    v-if="drawer"
    :visible="true"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :with-header="false"
    :modal="false"
    size="100%"
  >
    <div class="drawer-heder">
      <div class="heder-left">
        <!-- <div class="heder-img">
          <img
            src="@/assets/img/drawerHeader.png"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div> -->
        <div class="header-text">
          <span>{{ propsData[title[0].prop] }}</span>
          <span>{{ title[0].label }}</span>
        </div>
      </div>
      <div class="heder-right">
        <curren-Button
          :Butttondata="Butttondata"
          @tableButtonClick="tableButtonClick"
        >
          <template>
            <el-dropdown
              trigger="click"
              @command="handleCommand"
              v-if="JSON.stringify(dropdownData) != '{}'"
            >
              <el-button size="mini" icon="el-icon-more"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in dropdownData"
                  :key="index"
                  :command="item.command"
                  >{{ item.label }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </curren-Button>
      </div>
    </div>
    <div class="drawer-main">
      <curren-tabs
        :tabsData="dropdownTabs"
        :activeName="firstTabs"
        type="border-card"
        @handleClick="handleClick"
      >
        <template slot-scope="scope">
          <curren-descriptions
            border
            v-if="scope.value == 'xq'"
            :column="column"
            :direction="direction"
            :colon="false"
            :tabsDesTions="tabsDesTions"
            :propsData="propsData"
          >
          </curren-descriptions>
          <!-- todo-new 代码整理-->
          <div 
            class="currenTabel-drawer-mx-header" 
            v-if="scope.value == 'mx' && (showDetailColumnsSet || showDetailFilters)"
          >
            <el-button 
              v-if="showDetailColumnsSet"
              class="rowDropNotHideItem"
              @click="columnsSettingHandle()"
              size="mini"
            >字段设置</el-button>
            <el-button 
              type="primary"
              v-if="showDetailFilters"
              @click="detailFiltersHandle()"
              size="mini"
            >筛选</el-button>
          </div>
          <!-- 字段设置弹窗 -->
          <rowDrop 
            @radio="rowDrop" 
            :tableColumns="tableColumns" 
            :visible="rowDropVisible"
            @closeRowDrop="closeRowDrop"
            :source="'detail_api'"
            :innerMaxHeight="'calc(90vh - 400px)'"
          ></rowDrop>
          <!-- 全面搜索（普通+高级整合） -->
          <searchOverall
            ref="searchOverallRef"
            class="detailFiltersPopPage"
            :showSearchOverall="detailFiltersVisible"
            @getShowSearchOverall="getShowSearchOverall"
            :showMoreSearch="true"
            :tableColumns="tableColumns"
            @overallSearchFormClick="detailFiltersSearch"
            :filterActionOptions="filterActionOptions"
            :httpOverallSearchData="detailSearchDataFE"
            :disabledAction="true"
            :disabledLogic="true"
          >
            <!-- 插槽预留 -->
            <slot name="searchPrimarySlot"></slot>
          </searchOverall>
          <!-- currenTableDetails 组件 明细中带分页功能 -->
          <umyTable
            v-if="scope.value == 'mx'"
            :isUpdate="isUpdate"
            :tableBorder="true"
            :tableData="propsData.details"
            :propsData="propsData"
            :tableColumns="tableColumns"
            :selectionTable="selectionTable"
            :requiredRules="false"
            :setUTableHeight="showDetailColumnsSet ? 300 : 260"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @inlineDialog="inlineDialog"
            @buttonClick="buttonClick"
          >
            <template>
              <slot></slot>
            </template>		
          </umyTable>
          <!-- 明细页码 -->
          <pagination
            v-if="scope.value == 'mx'"
            :totalCount="totalCount"
            :pagesizeProps="MaxResultCount"
            @SizeChange="alterResultCountDetails"
            @CurrentChange="alertoldSkipCountDetails"
            :currentPageProps="currentPage"
          ></pagination>
          <!-- 新增汇总 表头 区分明细表头使用 summaryTableColumns -->
          <umyTable
            v-if="scope.value == 'hz'"
            :tableBorder="true"
            :tableData="propsData.summaryDetails"
            :tableColumns="summaryTableColumns.length == 0 ? tableColumns : summaryTableColumns"
            :selectionTable="selectionTable"
            :requiredRules="false"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @inlineDialog="inlineDialog"
            @buttonClick="buttonClick"
            :setUTableHeight="210"
          >
            <template>
              <slot></slot>
            </template>		
          </umyTable>
          <!-- 自定义扩展 -->
          <umyTable
            v-if="
              scope.value == zdyValue && 
              scope.value != 'xq' &&
              scope.value != 'mx' && 
              scope.value != 'hz' &&
              scope.value != 'zwlcj'
            "
            :tableBorder="true"
            :tableLoading="tableLoading"
            :tableData="otherData"
            :tableColumns="zdyTableColumns"
            :selectionTable="selectionTable"
            :requiredRules="false"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @inlineDialog="inlineDialog"
            @buttonClick="buttonClick"
            :setUTableHeight="210"
          >
            <template>
              <slot></slot>
            </template>		
          </umyTable>
          <!-- 自定义扩展（tree）的形式 目前使用位置：物品清单信息-子物品层级  todo:待优化-->
          <currenTable
            v-if="
              scope.value == zdyValue &&
              scope.value == 'zwlcj'
            "
            :tableLoading="tableLoading"
            :tableData="otherData"
            :tableColumns="zdyTableColumns"
            :selectionTable="selectionTable"
            :requiredRules="false"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @inlineDialog="inlineDialog"
            :treeProps="{children: 'children', hasChildren: 'hasChildren'}"
            @buttonClick="buttonClick"
          >
            <template>
              <slot></slot>
            </template>			
          </currenTable>
        </template>
      </curren-tabs>
    </div>
    <div class="drawer-Shut" @click="drawerShut">
      <el-button type="danger" size="mini">关闭</el-button>
    </div>
  </el-drawer>
</template>
<script>
import searchOverall from "@/components/searchOverall"
import { getListByItemcode,byItem,byProduct,byComponent,bySupplierCode,byLocation,byLocationCode,
  relationByLocationCode,byComponentCJ,purRecNoteCustomInfo,EnumPurchaseReceiptInspect 
} from "@/api/wms-api"
import currenButton from "@/components/currenButton"
import currenDescriptions from "@/components/currenDescriptions"
import currenTabs from "@/components/currenTabs"
import currenTable from "@/components/currenTable"
import pagination from "@/components/Pagination"
import rowDrop from "@/components/rowDrop/index.vue"
import { getParentNode } from '@/utils'
export default {
  name: 'currenTabel-drawer',
  components: {
    pagination,
    currenButton,
    currenDescriptions,
    currenTabs,
    currenTable,
    searchOverall,
    rowDrop
  },
  props: {
    // 是否显示明细-字段设置
    showDetailColumnsSet:{
      type: Boolean,
      default: true
    },
    // 是否显示明细-筛选
    showDetailFilters:{
      type: Boolean,
      default: true
    },
    // 明细-筛选-当前接口中的筛选数据（用于同步全面筛选的数据）
    detailSearchDataFE:{
      type: Object,
      default: null
    },
    title: {
      type: Array,
      default: () => {
        return []
      }
    },
    DrawerLoading: {
      type: Boolean,
      default: true
    },
    drawer: {
      type: Boolean,
      default: false
    },
    dropdownData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    propsData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tabsDesTions: {
      type: Array,
      default: () => {
        return []
      }
    },
    dropdownTabsData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    summaryTableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    Butttondata: {
      type: Array,
      default: () => {
        return [{
          type: 'warning',
          icon: 'el-icon-edit',
          label: '编辑',
          name: 'edit',
          size: 'mini'
        }]
      }
    },
    selectionTable: {
      type: Boolean,
      default: false
    },
    MaxResultCount: {
      type: Number,
      default: 0
    },
    totalCount: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 0
    },
    // 详情展现列数，默认为2列展现
    column: {
      type: Number,
      default: 2
    },
    // 详情展示方式，默认水平分布
    direction: {
      type: String,
      default: 'horizontal'
    },
    // 详情tabs排序默认
    firstTabs: {
      type: String,
      default: 'xq'
    }

  },
  computed: {
    dropdownTabs () {
      // 带有特殊扩展tabs页的
      if (this.dropdownTabsData.length !== 0) {
        return this.dropdownTabsData
      } else {
        // 正常普通 详情，明细，汇总
        // if (Object.keys(this.propsData).length != 0) {
          if (Object.keys(this.propsData)) {
          this.initDropdownTabsData = [{
            label: "详情",
            name: 'xq'
          }]
          // 明细可以为空数组，前端分页使用
          if(this.propsData.details){
            this.initDropdownTabsData.push({
              label: "明细",
              name: 'mx'
            })
          }
          if(this.propsData.summaryDetails && this.propsData.summaryDetails.length > 0){
            this.initDropdownTabsData.push({
              label: "汇总",
              name: 'hz'
            })
          }
        }
        return this.initDropdownTabsData
      }
    },
  },
  mounted () {
    // 点击外部，字段设置弹窗隐藏
    document.addEventListener('click',(e)=>{
      if(!this.rowDropVisible)return
      let _class = "rowDropNotHideItem"
      let _hasParent = getParentNode(e.target,_class)
      let _current_class = e.target._prevClass || e.target.className
      let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false
      if(!_hasParent && !_hasCurrent){
        this.closeRowDrop()
      }
    })
  },
  data () {
    return {
      // table 重新渲染所需key
      isUpdate: false,
      // 明细-字段设置是否显示
      rowDropVisible: false,
      otherData:[], // 切换tabs页赋值
      zdyTableColumns:[], // 自定义表头
      zdyValue:'', // 自定义展现值
      // firstTabs:'xq',
      initDropdownTabsData:[
        {
          label: "详情",
          name: 'xq'
        },
        {
          label: "明细",
          name: 'mx'
        },
        {
          label: "汇总",
          name: 'hz'
        }
      ],
      detailFiltersVisible:false,//筛选显示
      filterActionOptions:[{
        value: '==',
        label: '等于'
      }, {
        value: '!=',
        label: '不等于'
      }],
    }
  },
  methods: {
    rowDrop(data,type) {
      this.$emit('rowDrop',data,type)
      this.isUpdate = !this.isUpdate
    },
    // 明细-字段设置
    columnsSettingHandle(){
      this.rowDropVisible = !this.rowDropVisible
    },
    // 明细-筛选
    detailFiltersHandle(){
      this.detailFiltersVisible = !this.detailFiltersVisible
    },
    // 明细-全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值
    getShowSearchOverall(val){
      this.detailFiltersVisible = val || false
    },
    // 明细-全面筛选所有按钮操作集
    detailFiltersSearch(options){
      this.$emit('detailFiltersSearch', options)
    },
    // 明细-关闭字段设置
    closeRowDrop() {
      this.rowDropVisible = false
    },
    handleCommand (command) {
      this.$emit('handleCommand', command)
    },
    drawerShut () {
      this.$emit('drawerShut', false)
    },
    tableButtonClick (val) {
      this.$emit('drawerbutton', val)
    },
    //排序
    sortChange (data) {
      this.$emit('sortChange', data)
    },
    //点击selection框
    handleSelectionChange (val) {
      this.$emit("handleSelectionChange", val)
    },
    //点击name提交emit打开编辑页面
    inlineDialog (row) {
      this.$emit("inlineDialog", row)
    },
     //接收分页组件emit改变每页最大页数
    alterResultCountDetails (val) {
      this.$emit('alterResultCountDetails', val)
    },
    //接收分页组件emit改变当前页
    alertoldSkipCountDetails (val) {
      this.$emit('alertoldSkipCountDetails', val)
    },
    buttonClick(row) {
      this.$emit("buttonClick", row);
    },
    // tabs 切换页
    handleClick (val) {
      this.$emit("currenTabsChange", val);//父级获取当前的tab内容
      this.zdyValue = val.name
      this.dropdownTabsData.forEach( item => {
        if (item.name == val.name) {
          let parent = this.$parent
          parent.tableLoading = true
          // 详情 明细 汇总
          parent.firstTabs = val.name
          if (val.name == 'xq' || val.name == 'mx' || val.name == 'hz') {
            this.zdyTableColumns = []
            this.otherData = []
            parent.tableLoading = false
          } else {
            this.zdyTableColumns = []
            this.otherData = []
            // this.firstTabs = val.name
          // 其他自定义tab页
            if (item.functionName == 'getListByItemcode') {
              let params = {
                itemCode: this.propsData.code
              }
              getListByItemcode(params, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'byItem') {
              byItem(this.propsData.code, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'byProduct') {
              byProduct({product:this.propsData.product}, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'byComponent') {
              byComponent({component:this.propsData.component}, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } 
            // 基础数据管理-物品清单维护-物品清单信息-详情-子物品层级
            else if (item.functionName == 'byComponentCJ') {
              this.otherData = []
              byComponentCJ({component:this.propsData.component}, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                this.recursion(this.otherData)
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'bySupplierCode') {
              bySupplierCode({supplierCode:this.propsData.code}, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'byLocation') {
              byLocation(this.propsData.code==null?this.propsData.locationCode:this.propsData.code, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                this.o
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } else if (item.functionName == 'byLocationCode') {
              byLocationCode({locationCode: this.propsData.code}, item.url).then(res => {
                let itemData = []
                itemData.push(res)
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = itemData
                parent.tableLoading = false
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            } 
            // 基础数据管理-库位信息-详情-库位零件关系
            else if (item.functionName == 'relationByLocationCode') {
              relationByLocationCode({locationCode: this.propsData.code}, item.url).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.tableLoading = false 
              }).catch(err => {
                console.log(err)
                parent.tableLoading = false
              })
            }
            // 采购收货记录-合格品收货明细, 不合格品收货明细, 收货缺料明细
            else if(item.functionName == "purRecNoteCustomInfo"){
              parent.Loading.DrawerLoading = true
              purRecNoteCustomInfo( item.url,this.propsData.id).then(res => {
                let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
                delete zdyTableColumnsJSON[0].type
                this.zdyTableColumns = zdyTableColumnsJSON
                this.otherData = res
                parent.Loading.DrawerLoading = false
              }).catch(err => {
                console.log(err)
                parent.Loading.DrawerLoading = false
              })
            }
            // 客户退拆记录-详情页TAB-回冲记录
            else if(item.functionName == "customerDismantleBackFlushNote"){
              let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns]));
              delete zdyTableColumnsJSON[0].type
              this.zdyTableColumns = zdyTableColumnsJSON
              this.otherData = this.propsData.noteAndBackFlushDetails
            }
          }
        }
      })
    },
    // 递归 物品子级层级
    recursion(val){
      val.forEach(item => {
        if(item.componentDTOs) {
          item.children = item.componentDTOs
          this.recursion(item.componentDTOs)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// el-drawer
@import "./style/index.scss";
</style>