jintan-canlian-web/src/views/record/index.vue

<template>
  <div style="padding: 0 20px">

    <div ref="lxHeader">
      <lx-header icon="md-apps" text="档案管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="搜索" />
            <Button type="primary" @click="getindex">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;"
              @click="$refs['addRecord'].isShow = true,$refs['addRecord'].type = 'add'">添加</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;"
              @click="$refs['imports'].show()">导入</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;"
              @click="exportExcel(new Date().getTime().toString())">导出</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :total="total" @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorRecord(scope.row.id,'editor')">编辑</Button>
            <Button type="primary" size="small" style="margin-left: 10px;"
              @click="editorView(scope.row.id,'add')">访视</Button>
            <Button type="primary" size="small" style="margin-left: 10px;"
              @click="showInfo(scope.row.id)">视图</Button>
            <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteRecord(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <addRecord ref="addRecord" @refresh="getindex"></addRecord>
    <addViewRecord ref="addViewRecord" @refresh="getindex"></addViewRecord>
    <imports :table-name="customForm.tableName" :form-info="importForm" ref="imports" @refresh="getindex"></imports>

  </div>
</template>

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  import addRecord from "./components/addRecord.vue"
  import addViewRecord from "@/views/viewrecords/components/addViewRecord.vue"
  import {
    Message
  } from 'element-ui'
  import imports from "@/views/component/imports.vue"
  import * as XLSX from "xlsx";
  import { saveAs } from "file-saver";
  import {
    index as fieldIndex
  } from "@/api/system/customFormField";
  import {
    getparameter
  } from "@/api/system/dictionary";
  export default {
    components: {
      addRecord,
      addViewRecord,
      imports
    },
    data() {
      return {
        select: {
          pageSize: 10,
          pageIndex: 1,
          keyword: ""
        },
        rukuType: '',
        customForm: {
          customFormId: 1,
          tableName: "records"
        },
        form: [],
        importForm:[],
        exportForm:[],
        total: 0,
        list: [],
        table: [{
            label: '序号',
            type: 'index',
            fixed: 'left',
            width: 80
          },
          {
            label: "所属街道",
            width: 120,
            prop: 'street',
            align: 'center'
          },
          {
            label: "姓名",
            width: 120,
            prop: 'name',
            align: 'center',
            fixed: 'left'
          },
          {
            label: "性别",
            width: 120,
            prop: 'sex',
            align: 'center'
          },
          {
            label: "身份证号",
            width: 180,
            prop: 'idcard',
            align: 'center'
          },
          {
            label: "联系电话",
            width: 120,
            prop: 'mobile',
            align: 'center'
          },
          {
            label: "固话",
            width: 120,
            prop: 'telephone',
            align: 'center'
          },
          {
            label: "残疾证号",
            width: 180,
            prop: 'number',
            align: 'center'
          },
          {
            label: "残疾类别",
            width: 120,
            prop: 'disabilitytype',
            align: 'center'
          },
          {
            label: "残疾等级",
            width: 120,
            prop: 'disabilitylevel',
            align: 'center'
          },
          {
            label: "有效期至",
            width: 180,
            prop: 'validity',
            align: 'center'
          },
          {
            label: "户籍地址",
            width: 240,
            prop: 'address',
            align: 'left'
          },
          {
            label: "现居住地",
            width: 240,
            prop: 'reside',
            align: 'left'
          }
        ]
      }
    },
    methods: {
      showInfo(id) {
        this.$router.push({path:"/record/personinfo",query:{id:id}})
      },
      async getindex() {
        const res = await index({
          page_size: this.select.pageSize,
          page: this.select.pageIndex,
          table_name: this.customForm.tableName,
          show_relation:['admin','department'],
          filter: [{
            "key": "name",
            "op": "like",
            "value": this.select.keyword
          }],
        })
        this.list = res.data
        this.total = res.total
      },

      pageChange(e) {
        this.select.pageIndex = e
      },
      editorRecord(id, type) {
        this.$refs['addRecord'].id = id
        this.$refs['addRecord'].isShow = true
        this.$refs['addRecord'].type = type
      },
      editorView(id, type) {
        console.log(id,type)
        this.$refs['addViewRecord'].person_id = id
        this.$refs['addViewRecord'].isShow = true
        this.$refs['addViewRecord'].type = type

      },
      deleteRecord(row) {
        destroy({
          id: row.id,
          table_name: this.customForm.tableName
        }).then(res => {
          Message({
            type: 'success',
            message: '删除成功'
          })
          this.getindex()
        })
      },
      // 获取表信息
      async getField() {
        // console.log(this.$route.meta.params, "---", this.$route)
        // return
        // 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
        //     console.log("123", this.customForm)
        //     // 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.importForm = this.form
          ?.filter((i) => i.form_show&&i.list_show)
          .map((i)=>{
            return i
          })
          this.exportForm = this.form
            ?.filter((i) => i.list_show)
            .map((i)=>{
              return i
            })
      },
      async exportExcel(sheetName) {
        const res = await index(Object.assign(this.select,{ page: 1,page_size: 99999,table_name: this.customForm.tableName}))
        if(res.data){
          let headers = this.exportForm.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`);
        }
      },
    },
    mounted() {
      this.getindex()
      this.getField()
    }

  }
</script>

<style scoped lang="scss">
</style>