vue 单表格混入封装

封装的文件：

import qs from 'qs'
import { axios } from '@/utils/request'
export default {
    data() {
        return {
            viewModuleOptions: {
                createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
                activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
                getDataListURL: '', // 数据列表接口，API地址
                deleteURL: '', // 删除接口，API地址
                deleteIsBatch: false, // 删除接口，是否需要批量？
                deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                exportURL: '', // 导出接口，API地址
            },
            loading: false, //loading状态
            viewVisible: false, //详情页弹层
            dataForm: {}, //查询条件
            defaultQueryOptions: {}, //默认查询条件  重置使用
            dataList: [], // 数据列表
            dataListSelections: [], //已勾选列表
            pageNum: 1,
            pageSize: 10,
            total: 0,
            deleteFileHeader: null
        }
    },
    created() {
        // 用于文件删除
        const headers = {
            'clientId': process.env.VUE_APP_ClientID,
            'token': localStorage.getItem('jwt')
        }
        this.deleteFileHeader = headers;
        // 配置默认参数
        this.defaultQueryOptions = {
            ...this.dataForm
        }
        if (this.viewModuleOptions.createdIsNeed) {
            this.query()
        }
    },
    activated() {
        if (this.viewModuleOptions.activatedIsNeed) {
            this.query()
        }
    },
    methods: {
        query() {
            const { dataForm, pageNum, pageSize } = this
            this.loading = true;
            axios({
                url: this.viewModuleOptions.getDataListURL,
                method: "get",
                params: {
                    ...dataForm,
                    pageNum,
                    pageSize
                }
            }).then(res => {
                if (!res.flag) {
                    return this.$message.error(res.msg)
                }
                this.dataList = res.result.records;
                this.total = res.result.total;
                if (res.result.records == 0 && this.pageNum > 1) {
                    this.pageNum--;
                    this.query();
                }
            }).finally(() => {
                this.loading = false
            })
        },
        resetForm() {
            this.pageNum = 1;
            this.dataForm = {...this.defaultQueryOptions }
            this.query()
        },
        pageNumChange(num) {
            this.query()
        },
        pageSizeChange(current, size) {
            this.pageSize = size;
            this.query()
        },
        // 新增 / 修改
        addOrUpdateHandle(data) {
            data = data || ''
            this.$nextTick(() => {
                // 传id 通过调详情接口获取数据
                if (typeof(data) === 'string' && data) {
                    this.$refs.addOrUpdate.dataForm[this.viewModuleOptions.deleteIsBatchKey] = data
                }
                // 传递数据
                else if (typeof(data) === 'object') {
                    this.$refs.addOrUpdate.dataForm = {...data }
                }
                // 清空数据
                else {
                    let dataForm = this.$refs.addOrUpdate.dataForm
                    for (var key in dataForm) {
                        dataForm[key] = undefined;
                    }
                    this.$refs.addOrUpdate.dataForm = {...dataForm }
                }
                this.$refs.addOrUpdate.init()
            })
        },
        viewDetailHandle(id) {
            this.$nextTick(() => {
                this.$refs.viewDetails.init(id)
            })
        },
        // 删除
        deleteHandle(id, fileIds) {
            // id 删除条目的id
            //fileIds 删除条目的 相关文件
            const that = this;
            this.$confirm({
                title: "提示",
                content: "确认要删除选中的条目吗",
                onOk() {
                    axios({
                        url: `${that.viewModuleOptions.deleteURL}/${id}`,
                        method: "delete",
                    }).then(res => {
                        if (!res.flag) {
                            return that.$message.error(res.msg)
                        }
                        that.$message.success('操作成功')
                            // 刷新列表
                        that.query();
                        that.deleteUploadFile(fileIds)
                    }).catch(() => {})
                }
            })
        },
        // 导出
        exportHandle() {
            var params = qs.stringify({
                'jwt': localStorage.getItem('jwt'),
                ...this.dataForm
            })
            window.location.href = `/sys/export${this.mixinViewModuleOptions.exportURL}?${params}`
        },
        // 下拉选项框  筛选
        selectFilterHandle(inputValue, option) {
            let text = option.data.props.itemCName || option.data.props.label
            return text.indexOf(inputValue.toUpperCase()) >= 0
        },
        // 根据value  和 list   返回label
        filterLabelBySelect(value, list) {
            return list.filter(item => item.value == value)[0].label
        },
        // 删除上传文件
        deleteUploadFile(fileIds) {
            if (fileIds) {
                axios({
                    method: "post",
                    headers: this.deleteFileHeader,
                    url: `/sys/file/_delete?fileIds=${fileIds}`,

                })
            }
        }
    },
}

表格展示页使用封装：

<template>
  <div>
    <!-- 特种作业人员信息-->
    <a-row class="btn-content">
      <a-col :span="5">
        <a-button type="primary" icon="plus" @click="addOrUpdateHandle()">新增</a-button>
      </a-col>
      <a-col :span="19" class="search-wrapper">
        <a-button type="primary" icon="logout" @click="goback()">返回</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-table :data-source="dataList" :columns="columns" rowKey="sosId" :pagination="false">
        <!-- 附件 -->
        <template slot="photo" slot-scope="text">
          <div>
            <RUpload
              :value="text"
              :parentDirCode="parentDirCode"
              :isDelete="false"
              :isUpload="false"
              :isDownload="false"
            />
          </div>
        </template>
        <!-- 操作 -->
        <template slot="actions" slot-scope="text, record">
          <div class="tab-btns">
            <a-button class="orange" icon="edit" size="small" @click="addOrUpdateHandle(record)">修改</a-button>
            <a-button class="red" icon="delete" size="small" @click="deleteHandle(text)">删除</a-button>
          </div>
        </template>
      </a-table>
      <a-pagination
        class="eqrthquake"
        v-model="pageNum"
        :total="total"
        show-size-changer
        show-quick-jumper
        show-less-items
        :showTotal="total => `共 ${total} 条`"
        @change="pageNumChange"
        @showSizeChange="pageSizeChange"
      />
    </a-spin>
    <AddOrUpdate ref="addOrUpdate" :selectOptions="selectOptions" :projectInfoNo="id" />
  </div>
</template>
<script>
import viewModuleMixins from "@/utils/view-module"
import AddOrUpdate from "./addOrUpdate.vue"
import { checkPreview } from "@/api/fileUpload"
import RUpload from "@/components/RUpload"
import { personEqQaOptions } from "../../components/tools"
const columns = [
  {
    title: "姓名",
    dataIndex: "personName",
    width: 120,
    align: "center",
    ellipsis: true
  },
  {
    title: "岗位",
    dataIndex: "station",
    align: "center",
    width: 140,
    ellipsis: true
  },
  {
    title: "持证类型",
    dataIndex: "documentsType",
    width: 140,
    align: "center",
    ellipsis: true,
    customRender: text => personEqQaOptions["documentsType"].filter(item => item.value === text)[0].label
  },
  {
    title: "发证机关",
    dataIndex: "issuanceAuthprity",
    width: 140,
    align: "center",
    ellipsis: true
  },
  {
    title: "证件有效期",
    dataIndex: "validityOfCertificate",
    width: 140,
    align: "center",
    ellipsis: true,
    customRender: text => text && text.substr(0, 11)
    // customRender: text => personEqQaOptions['accidentProperty'].filter(item => item.value === text)[0].label
  },
  {
    title: "证件照",
    dataIndex: "photo",
    align: "center",
    width: 320,
    ellipsis: true,
    scopedSlots: { customRender: "photo" }
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: 140,
    align: "center",
    ellipsis: true
  },
  {
    title: "操作",
    dataIndex: "sosId",
    width: 200,
    ellipsis: true,
    fixed: "right",
    scopedSlots: { customRender: "actions" }
  }
]
export default {
  name: "PersonnelInformation",
  mixins: [viewModuleMixins],
  inject: ["goback"],
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  components: {
    AddOrUpdate,
    RUpload
  },
  computed: {
    token() {
      return this.$store.state.user.token.substr(7)
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(newval) {
        this.dataForm.projectInfoNo = newval
      }
    }
  },
  data() {
    return {
      columns,
      viewModuleOptions: {
        getDataListURL: "/gpc/ops/querySpecialOperStuffDataList",
        deleteURL: "/gpc/ops/deleteSpecialOperStuffData",
        exportURL: "",
        deleteIsBatchKey: "sosId" // 不一定
      },
      clientId: process.env.VUE_APP_ClientID,
      parentDirCode: "4ghahcxwvr99csiadzwhy26i", // 智能物探中心 标准化采集  地震采集  安全管控 事故事件
      dataForm: {
        projectInfoNo: undefined,
        personName: undefined,
        station: undefined,
        documentsType: undefined,
        issuanceAuthprity: undefined,
        validityOfCertificate: undefined,
        photo: undefined,
        remark: undefined
      },
      selectOptions: personEqQaOptions
    }
  },
  methods: {
    valueFormatter(value, list) {
      const current = list.filter(item => item.value === value)
      return current && current[0] && current[0].label
    },
    previewImg(fileId) {
      // 预览
      checkPreview(fileId).then(res => {
        if (res && res.msg === "您沒有该资源的访问权限") {
          return this.$message.error(res.msg)
        }
        if (res) {
          const link = document.createElement("a")
          link.href = `/sys/file/preview/${fileId}?jwt=${this.token}&clientId=${this.clientId}`
          link.target = "_blank"
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          this.$message.warn("该文件暂不支持预览功能！")
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn-content {
  .search-wrapper {
    text-align: right;
    span {
      display: inline-block;
      vertical-align: top;
      line-height: 32px;
      margin-left: 10px;
    }
    .ant-select {
      width: 120px;
    }
    .ant-input-affix-wrapper {
      // display: inline-block;
      // vertical-align: top;
      width: 120px;
    }
  }
}
.ant-table-wrapper {
  /deep/ .fileList {
    .fileListItem {
      width: 100%;
      & > span {
        max-width: 200px;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        display: inline-block;
      }
      .fileListButton {
        width: auto;
      }
    }
  }
}
</style>

修改上传页使用封装：

<template>
  <a-modal v-model="visible" :width="800" title="特种作业人员信息">
    <a-spin :spinning="loading">
      <a-form-model :model="dataForm" :rules="dataFormRules" ref="dataForm">
        <a-row>
          <a-col :span="4">姓名：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="personName">
              <a-input v-model="dataForm.personName" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">岗位：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="station">
              <a-input v-model="dataForm.station" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">持证类型：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="documentsType">
              <a-select
                v-model="dataForm.documentsType"
                showSearch
                allowClear
                :filterOption="selectFilterHandle"
                :options="selectOptions['documentsType']"
                placeholder="请选择"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">证件编号：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="certificationNo">
              <a-input v-model="dataForm.certificationNo" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">发证机关：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="issuanceAuthprity">
              <a-input v-model="dataForm.issuanceAuthprity" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="4">证件有效期：</a-col>
          <a-col :span="8">
            <a-form-model-item prop="validityOfCertificate">
              <a-date-picker
                v-model="dataForm.validityOfCertificate"
                allowClear
                placeholder="请选择"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              ></a-date-picker>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">证件照：</a-col>
          <a-col :span="20">
            <a-form-model-item prop="photo">
              <RUpload v-model="dataForm.photo" :parentDirCode="parentDirCode" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">备注：</a-col>
          <a-col :span="20">
            <a-form-model-item prop="remark">
              <a-textarea v-model="dataForm.remark" :rows="4" placeholder="请输入"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div slot="footer">
      <a-button @click="visible = false">取消</a-button>
      <a-button type="primary" @click="hideModal(0)">提交</a-button>
      <!-- <a-button type="primary" @click="saveModel(1)">保存</a-button> -->
    </div>
  </a-modal>
</template>
<script>
import RUpload from '@/components/RUpload'
import { validateAlphanumeric } from '@/utils/validate.js'
import { saveOrUpdateSOS } from '@/api/gpc/ops/safetyControl/personnelInformation'
export default {
  components: {
    RUpload
  },
  props: {
    selectOptions: {
      type: Object,
      default: () => {}
    },
    projectInfoNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: false,
      visible: false,
      parentDirCode: '4ghahcxwvr99csiadzwhy26i', // 智能物探中心 标准化采集  地震采集  安全管控 事故事件
      dataForm: {},
      dataFormRules: {
        personName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 40, message: '字数不得超过40个', trigger: 'blur' }
        ],
        station: [
          { required: true, message: '请输入岗位', trigger: 'blur' },
          { min: 1, max: 40, message: '字数不得超过40个', trigger: 'blur' }
        ],
        documentsType: [
          { required: true, message: '请输入持证类型', trigger: 'blur' },
          { min: 1, max: 40, message: '字数不得超过40个', trigger: 'blur' }
        ],
        issuanceAuthprity: [
          { required: true, message: '请输入发证机关', trigger: 'blur' },
          { min: 1, max: 40, message: '字数不得超过40个', trigger: 'blur' }
        ],
        certificationNo: [
          { required: true, validator: validateAlphanumeric, message: '请输入字母数值类型', trigger: 'blur' },
          { required: true, message: '请输入证件编号', trigger: 'blur' },
          { min: 1, max: 40, message: '字数不得超过40个', trigger: 'blur' }
        ],
        validityOfCertificate: [
          { required: true, message: '请输入证件有效期', trigger: 'change' }
        ],
        photo: [{ required: true, message: '请上传证件照', trigger: 'change' }],
        remark: [{ min: 1, max: 200, message: '字数不得超过200个', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    saveModel (bsflag) {
      const { projectInfoNo } = this
      saveOrUpdateSOS({
        projectInfoNo,
        ...this.dataForm,
        bsflag
      })
        .then(res => {
          if (!res.flag) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.$refs['dataForm'].resetFields()
          this.$parent.query()
          this.visible = false
        })
        .finally(() => {
          this.loading = false
        })
    },
    hideModal (bsflag) {
      const { projectInfoNo } = this
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          saveOrUpdateSOS({
            projectInfoNo,
            ...this.dataForm,
            bsflag
          })
            .then(res => {
              if (!res.flag) {
                return this.$message.error(res.msg)
              }
              this.$message.success(res.msg)
              this.$refs['dataForm'].resetFields()
              this.$parent.query()
              this.visible = false
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    // 下拉选项框  筛选
    selectFilterHandle (inputValue, option) {
      return option.data.props.itemCName.indexOf(inputValue.toUpperCase()) >= 0
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form {
  .ant-col-4 {
    text-align: right;
    line-height: 40px;
    &::before {
      content: "*";
      display: inline-block;
      vertical-align: top;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
    }
  }
  .ant-form-item {
    margin-bottom: 10px;
    .ant-calendar-picker {
      width: 100%;
    }
  }
}
</style>