sz-kjsxy-web/src/views/component/table.vue

<template>
  <div>
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader icon="md-apps" :text="title || customForm.tableName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex">
                  <Select v-model="select.filter[0].key" style="width: 100px;" placeholder="搜索条目">
                    <Option v-for="item in form" :key="item.id" :value="item.field">{{ item.name }}</Option>
                  </Select>
                  <Select v-model="select.filter[0].op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                    <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                  </Select>
                  <template v-if="select.filter[0].op !== 'range' && !columnArrTest(select.filter[0].key)">
                    <Input v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
                  </template>
                  <template v-else-if="select.filter[0].op !== 'range' && columnArrTest(select.filter[0].key)">
                    <Select v-model="select.filter[0].value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
                      <Option v-for="item in getColumnParams(select.filter[0].key)" :key="item.id" :value="item.id">{{ item.value || item.name || item.no || item.id }}</Option>
                    </Select>
                  </template>
                  <template v-else>
                    <Input :value="select.filter[0].value.split(',')[0]"
                           style="width: 150px;margin-left: 10px;"
                           placeholder="范围开始关键词"
                           @input="(e)=>inputStartHandler(e,select.filter[0])"/>
                    <span style="margin-left: 10px;display: flex;align-items: center;">至</span>
                    <Input :value="select.filter[0].value.split(',')[1]"
                           style="width: 150px;margin-left: 10px;"
                           placeholder="范围结束关键词"
                           @input="(e)=>inputEndHandler(e,select.filter[0])"/>
                  </template>
                  <Button
                    style="margin-left: 10px"
                    type="primary"
                    @click="$refs['xyTable'].getTableData(true)"
                  >查询</Button
                  >

                  <xy-selectors
                    style="margin-left: 10px"
                    @reset="reset"
                    @search="$refs['xyTable'].getTableData(true)"
                  >
                    <template>
                      <div class="select">
                        <div class="select__item" v-for="(item,index) in select.filter" :key="`${item.value}-${index}`">
                          <p>条件{{index+1}}</p>
                          <Select v-model="item.key" style="width: 100px;" placeholder="搜索条目">
                            <Option v-for="item in form" :key="item.id" :value="item.field">{{ item.name }}</Option>
                          </Select>
                          <Select v-model="item.op" style="width: 100px;margin-left: 10px;" placeholder="搜索条件">
                            <Option v-for="item in op" :key="item.value" :value="item.value">{{ item.label }}</Option>
                          </Select>
                          <template v-if="item.op !== 'range' && !columnArrTest(item.key)">
                            <Input v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请填写关键词"/>
                          </template>
                          <template v-else-if="item.op !== 'range' && columnArrTest(item.key)">
                            <Select v-model="item.value" style="width: 150px;margin-left: 10px;" placeholder="请选择关键词">
                              <Option v-for="item in getColumnParams(item.key)" :key="item.id" :value="item.id">{{ item.value || item.name || item.no || item.id }}</Option>
                            </Select>
                          </template>
                          <template v-else>
                            <Input :value="item.value.split(',')[0]"
                                   style="width: 150px;margin-left: 10px;"
                                   placeholder="范围开始关键词"
                                   @input="(e)=>inputStartHandler(e,item)"/>
                            <span style="margin-left: 10px;">至</span>
                            <Input :value="item.value.split(',')[1]"
                                   style="width: 150px;margin-left: 10px;"
                                   placeholder="范围结束关键词"
                                   @input="(e)=>inputEndHandler(e,item)"/>
                          </template>
                          <el-button v-if="index !== 0" size="small" type="danger" icon="el-icon-delete" circle style="margin-left: 10px;" @click="select.filter.splice(index,1)"></el-button>
                        </div>
                      </div>
                      <div class="add-btn">
                        <el-button size="small" type="primary" icon="el-icon-plus" circle @click="select.filter.push({key: '',op: '',value: ''})"></el-button>
                        <span>新增一条</span>
                      </div>
                    </template>
                  </xy-selectors>
                </div>
              </template>
              <template #create>
                <Button
                  type="primary"
                  @click="$refs['dialog'].setType('add'),$refs['dialog'].show()"
                >新增</Button
                >
              </template>
              <template #import>
                <Button
                  type="primary"
                  @click="$refs['imports'].show()"
                >导入</Button
                >
              </template>
              <template #export>
                <Button
                  type="primary"
                  @click="exportExcel(new Date().getTime().toString())"
                >导出</Button
                >
              </template>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table
      :auths="auths_auth_mixin"
      :delay-req="true"
      :destroy-action="destroy"
      ref="xyTable"
      :border="true"
      :action="index"
      :req-opt="Object.assign(select,selectForm)"
      :destroy-req-opt="select"
      :table-item="table"
      @detail="row => {
        $refs['drawer'].setId(row.id);
        $refs['drawer'].show();
      }"
      @editor="row => {
        $refs['dialog'].setId(row.id);
        $refs['dialog'].setType('editor');
        $refs['dialog'].show();
      }">
    </xy-table>

    <dialoger :table-name="customForm.tableName" :form-info="form" ref="dialog" @refresh="$refs['xyTable'].getTableData()"></dialoger>
    <drawer :table-name="customForm.tableName" :form-info="form" ref="drawer"></drawer>
    <imports :table-name="customForm.tableName" :form-info="form" ref="imports" @refresh="$refs['xyTable'].getTableData()"></imports>
  </div>
</template>

<script>
import { index as fieldIndex } from "@/api/system/customFormField";
import { authMixin } from "@/mixin/authMixin";
import { index,destroy } from "@/api/system/baseForm";
import { op } from "@/const/op";
import { download } from "@/utils/downloadRequest";
import { getparameter } from "@/api/system/dictionary";
import { show } from "@/api/system/customForm";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";

import dialoger from './dialog.vue';
import LxHeader from "@/components/LxHeader/index.vue";
import headerContent from "@/components/LxHeader/XyContent.vue";
import drawer from "@/views/component/drawer.vue";
import imports from "./imports.vue"
export default {
  components:{
    LxHeader,
    dialoger,
    headerContent,
    drawer,
    imports
  },
  mixins: [authMixin],
  data() {
    return {
      title: "",
      op,
      select: {
        table_name: "",
        filter: [
          {
            key: "",
            op: "",
            value: ""
          }
        ]
      },
      selectForm: [],
      form: [],
      table: [],
      customForm: {
        customFormId: "",
        tableName: ""
      }
    }
  },
  methods: {
    index,destroy,download,
    reset() {
      this.select.filter.splice(1)
      this.select.filter[0] = {
        key: "",
        op: "",
        value: ""
      }
    },

    async exportExcel(sheetName) {
      const res = await index(Object.assign(this.select,{ page: 1,page_size: 9999}))
      if(res.data){
        let headers = this.form.map(i => {
          return {
            key: i.field,
            title: i.name
          }
        })
        const data = res.data.map(row => headers.map(header => row[header.key]));
        data.unshift(headers.map(header => header.title));
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.aoa_to_sheet(data);
        XLSX.utils.book_append_sheet(wb, ws, sheetName);
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${sheetName}.xlsx`);
      }
    },

    //target要为内存地址引用类型
    inputStartHandler(e,target) {
      let temp = target?.value.split(',')[1]
      target.value = `${e},${temp ? temp : ""}`
    },
    inputEndHandler(e,target) {
      let temp = target?.value.split(',')[0]
      target.value = `${temp ? temp : ""},${e}`
    },

    async getFormDetail() {
      const res = await show({ id: this.customForm.customFormId },false)
      this.title = res.name
    },

    async getField() {
      if(this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form)
        try {
          let custom_form = JSON.parse(decode)
          this.customForm.customFormId = custom_form.custom_form_id
          this.customForm.tableName = custom_form.table_name
          this.select.table_name = custom_form.table_name
        }catch (err) {
          console.warn(err)
        }
      }

      const res = await fieldIndex({
        page: 1,
        page_size: 999,
        custom_form_id: this.customForm.customFormId,
        sort_name: 'sort',
        sort_type: 'asc',
      })
      if(res.data && res.data instanceof Array) {
        res.data.forEach(i => {
          if (i.field) {
            if (
              (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
              i.parameter_id
            ) {
              getparameter({ id: i.parameter_id }).then((res) => {
                i._paramters = res.detail ?? [];
              });
            }
            if (
              (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
              i.link_table_name
            ) {
              index({
                page: 1,
                page_size: 999,
                table_name: i.link_table_name,
              }).then((res) => {
                i._paramters = res.data ?? [];
              });
            }
          }
        })
      }
      this.form = res.data
      this.selectForm = ''
      this.table = res.data.map(i => {
        let linkOb = {}

        if(i.parameter_id) {
          linkOb.customFn = row => {
            return (
              <span>{ row[i.link_with_name]?.value }</span>
            )
          }
        }
        if(i.link_table_name) {
          if(i.link_relation === 'hasOne') {
            linkOb.customFn = row => {
              if(i.edit_input === 'file') {
                return (
                  <a download={row[i.link_with_name]?.original_name} href={ row[i.link_with_name]?.url }>{ row[i.link_with_name]?.original_name }</a>
                )
              }else{
                return (
                  <span>{ row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value }</span>
                )
              }
            }
          }
          if(i.link_relation === 'hasMany') {
            linkOb.customFn = row => {
              return (
                <div>
                  { row[i.link_with_name]?.map(o => (<span>{ o?.name || o?.no || o?.value }</span>)) }
                </div>
              )
            }
          }
        }
        return Object.assign({
          prop: i.field,
          label: i.name,
          width: i.width,
          fixed: i.is_fixed
        },linkOb)
      })
      this.table.unshift({
        type: 'index',
        width: 60,
        label: '序号'
      })
    }
  },
  computed: {
    columnArrTest() {
      return function (field) {
        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field).search_input === 'checkbox' : false
      }
    },
    getColumnParams() {
      return function (field) {
        return this.form.find(i => i.field === field) ? this.form.find(i => i.field === field)._paramters : []
      }
    },
  },
  created() {
    this.getField()
    this.getFormDetail()
  }
}
</script>

<style scoped lang="scss">
.select {
  &__item {

    & > p {
      display: inline-block;
      width: 80px;
      text-align: center;
    }

    & + div {
      margin-top: 6px;
    }
  }
}
.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  & > span {

    padding: 0 10px;
  }
}

a {
  color: red;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  color: red;
  text-decoration: underline;
}
</style>