element ui 二次封装

el-table二次封装

数据示例 prop 字段 label 字段名 date: true 时间戳转年月日 :showOperationColumn="false" 不显示操作列

代码示例

import ComTable from "element_package/common/comTable.vue";
// 数据
this.tableData = {data: records, set: [
{prop: 'no', label: '序号', width: 100, minWidth: 100, fixed: true, date: true, dataValues: { 1: '新增', 2: '修改' }},
{prop: 'projectNo', label: '项目编号'},
]}
// 组件
<com-table :tableData="tableData" :border="true" size="mini" rightWidth="150" 
selection showIndex
:stripe="true" :maxHeight="200" :loading="false" :showOperationColumn="false">
    <template slot-scope="scope">
    <el-button
        size="mini"
        @click="handleEdit(scope.$index, scope.row)">查看</el-button>
    <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
</com-table>

el-pagination二次封装

page.size:一页显示多少条 page.page:第几页 page.total:共多少条

组件使用示例

<com-pagination
:page-sizes="[5, 10, 20, 50]"
:layout="'total, sizes, prev, pager, next, jumper'"
:total="total"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange">
</com-pagination>

el-input二次封装

label 标题

组件使用示例

<com-input
    :label="getName('投标邀请回复截止时间', isGov)"
    v-model="form.tenderInviteAnswerTime"
    type="datetime"
/>

数据字典-行业分类选项

hangyeChange方法传入最后选择的行业字符串 value数据回显

组件使用示例

import ComHangye from "element_package/common/hangyeTypes.vue";
<com-hangye @change="hangyeChange" value="行业"></com-hangye>
components: {ComHangye}

数据字典-城市选择

import comCity from "element_package/common/cityTypes.vue";
<com-city @change="cityChange"></com-city>
components: {comCity}

数据字典-组织机构选择

import comJigou from "element_package/common/jigouTypes.vue";
<com-jigou @change="jigouChange"></com-jigou>
components: {comJigou}

附件上传

fileList需要回显的数据 model上传后存储的文件夹 showUploadBtn是否显示上传按钮

fileTypes限制上传文件类型，默认不限制

import comUpload from "element_package/common/fileUpload.vue"
<com-upload :fileList="form.attachFilePath" model="endumClarify"
:uploadBtnText="上传附件" @fileListDelete="fileListDelete"
:fileTypes="['docx', 'doc']"
:showDelete="false"
:deleteFileMsg="确认删除附件？"
:showUploadBtn="false" @fileListChange="fileAdd"></com-upload>
components: {comUpload}

富文本编辑器

import editorText from '@element_package/common/UEditor.vue'
<editor-text :defaultTemplate="form.announceContent" v-if="showEditor"
@change="form.announceContent = \$event"></editor-text>
form.announceContent = `<h4><span contenteditable="false">2.项目概况与招标范围</span></h4>`
components: {editorText}

操作按钮 根据后台返回权限显示对应按钮

type默认是text

handleView-查看 handleDelete-删除 handleAdd-添加 handleUpdate-修改

runBiaoduanList 跳转标段列表

<com-data-btn
type="text"
:dataChildren="dataChildren"
@handleView="handleDel(scope.row.id)"
@handleDelete="handleDelete(scope.row)"
@handleAdd="handleAdd(scope.row)"
@handleUpdate="handleUpdate(scope.row)"
@runBiaoduanList="runBiaoduanList(scope.row.id)"
/>

部门及人员选择选择

import CompersonSelect from "element_package/common/comPersonSelect"
<CompersonSelect @personChange="form.userIds = $event" />