charge-java/admin-web/src/components/form/ExtSContainer.vue

<style scoped>
</style>

<template>
  <el-drawer
      ref="modal"
      v-model="state.show"
      show-close
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="选择"
      style="padding: 10px;"
      size="45%">

    <el-row>
      <el-col :span="24">
        <ExtQueryForm ref="queryRef"
                      v-model="state.queryForm"
                      :columns="state.columns"
                      @on-change="loadData(true)"/>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="24">
        <el-scrollbar>
          <ExtTable
              :height="state.height"
              :data-list="state.dataList"
              :columns="state.columns"
              :show-check-box="state.multiple"
              :loading="state.loading"
              :border="true"
              :selectable="true"
              @on-check-change="handleCheckChange"
              @on-sort-change="handleSortChange"/>
        </el-scrollbar>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <ExtPage v-model:value="state.pageQuery" @change="loadData(true)"/>
      </el-col>
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.show = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-drawer>
</template>


<script setup lang="ts" name="ExtSContainer">
import {reactive, onMounted, defineAsyncComponent,nextTick,ref} from 'vue';

import {$body, $post} from "/@/utils/request";
import u from "/@/utils/u";
import ExtQueryForm from "/@/components/form/ExtQueryForm.vue";

const ExtPage = defineAsyncComponent(() => import('/@/components/form/ExtPage.vue'))
const ExtTable = defineAsyncComponent(() => import('/@/components/form/ExtTable.vue'))

const  queryRef = ref();
const state = reactive({
  queryItem: {
    id: undefined,
  },
  init: false,
  columns: [
    {label: 'ID', prop: 'id', width: 70,query: true,type:'number',conf:{op:'eq'}},
    {label: '名称', prop: 'name', query: true, type: 'text', resizable: true},
    {label: '创建时间', prop: 'createAt', query: true,sortable: 'custom',type:'datetime',hide:true},
    {label: '更新时间', prop: 'updateAt',query: true, sortable: 'custom',type:'datetime',hide:true},
  ],
  datas: [],
  checkIds: [],
  chosenIdList: [],
  config: {} as any,
  show: false,
  queryForm: {},
  pageQuery: {
    pageIndex: 1,
    pageSize: 20,
    total: 0
  },
  callback: () => {
  },
  dataList: [],
  checkDataList: [],
  multiple: false,
  height:500,
  loading:false
})

onMounted(() => {
  // initQuery();

  console.log("ExtSContainer>>>>>>>>>>onMounted")


})



const open = (callback: Function, multiple: boolean = false, config: any, chosenIdList: Array<number>) => {
  state.config = config;
  state.show = true;
  state.multiple = multiple;
  state.callback = callback;
  state.chosenIdList = chosenIdList;
  initQuery();
  loadData(true)
}

const handleSortChange = (sort: any) => {
  console.log("handleSortChange>>>>", sort)
  //TODO 合并查询条件
}

const handleCheckChange = (list: any) => {
  console.log("xxxx choosexxxx", list)
  state.checkDataList = list;
}

const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageIndex = 1;
  }
  let {url, domain, cols, query} = state.config;
  // if (url) {
  //   request = u.fmt.fmtUrl(url);
  // } else {
  //   request = u.fmt.fmtUrl(`/${domain}/list`);
  // }
  let requestQuery = {...state.pageQuery,...query, ...state.queryForm}

  console.log(requestQuery)
  $body(url, requestQuery).then((res: any) => {
    state.loading = false;
    let {list, count} = res;
    state.pageQuery.total = count;
    state.dataList = list;
  })
}


const confirm = () => {
  if (state.callback && typeof state.callback === 'function') {
    state.callback.apply(null, [state.checkDataList]);
  }
  /*  let list = [];
    for (var i = 0; i < this.dataList.length; i++) {
      if (this.containsInIds(this.dataList[i].id)) {
        list.push(this.dataList[i]);
      }
    }
    if (this.options.callback && list.length > 0) {
      this.options.callback(list);
    }*/
  state.show = false;
}


/**
 * 设置基础构造查询字段、展示字段等
 */
const initQuery = () => {
  if (state.init) {
    return;
  }
  let {columns, query} = state.config;
  if (!u.isEmptyOrNull(columns)) {
//
  }
  console.log(state.config)
  if (query) {
    state.queryForm = {...state.queryForm, ...query}
    // Object.keys(query).forEach(k=>state.queryForm[k] = query[k]);
  }
  console.log(state.queryForm)
  state.init = true;

  nextTick(() => {
    let bodyHeight = document.body.clientHeight;
    let queryHeight = queryRef.value?.$el.clientHeight;
    state.height = bodyHeight - queryHeight - 150
    console.log(state.height)
  })
}



// 暴露变量
defineExpose({
  open,
});
</script>