option.js
import { getStore } from "@/util/store";
export const option = {
index: true,
menu:false,//取消操作列
indexLabel: "序号",
border: false,
searchMenuSpan: 6,
searchShowBtn: false,
stripe: true,
headerAlign: "center",
align: "center",
addBtn: false,
editBtn: false,
delBtn: false,
viewBtn: false,
selectClearBtn: false,
size: "mini",
labelWidth: 100,
rowKey: "id",//使用rowKey來设置一个唯一值
columnBtn: false,
selection: true,
reserveSelection:true,//分页时保留上一页得勾选
column: [
{
label: "队员姓名",
prop: "name",
search: true
},
{
label: "性别",
prop: "gender",
type: "select",
dicData: [
{
label: "男",
value: 1
},
{
label: "女",
value: 2
}
]
},
{
label: "手机号码",
prop: "mobile"
},
{
label: "岗位",
prop: "post",
search: true,
type: "select",
dicData: []
},
//配置字典值
{
label: "队员状态",
prop: "eocStatus",
search: true,
type: "select",
dicData: [
{
dictValue: null,
dictLabel: "全部"
},
{
dictValue: 0,
dictLabel: "待命中"
},
{
dictValue: 1,
dictLabel: "任务中"
},
{
dictValue: 2,
dictLabel: "休假中"
}
],
props: {
label: "dictLabel",
value: "dictValue"
}
},
{
label: "来源",
prop: "source",
dicData: [],
props: {
label: "dictDataLabel",
value: "dictDataValue"
}
},
{
searchLabelWidth: 80,
label: "发送时间",
prop: "sendTime",
format: "yyyy-MM-dd HH:mm",
type: "datetime",
rangeSeparator: "-"
},
//使用接口字典值配置数据
{
searchLabelWidth: 80,
label: "短信类型",
prop: "smsType",
type:'select',
dicData: getStore({ name: "busiDictList" }).find(
element => {
if(element.dictType == "sms_type"){
return element.dataList
}
}
).dataList,
props: {
label: "dictLabel",
value: "dictValue"
},
search: true,
searchClearable: true,
searchSpan: 6
},
]
};
export const userOption = {
index: true,
indexLabel: "序号",
border: false,
searchMenuSpan: 6,
searchShowBtn: false,
selection: true,
stripe: true,
headerAlign: "center",
align: "center",
addBtn: false,
editBtn: false,
delBtn: false,
viewBtn: false,
selectClearBtn: false,
size: "mini",
labelWidth: 100,
rowKey: "id",
columnBtn: false,
menu: false,
column: [
{
label: "姓名",
prop: "realName",
search: true
},
{
label: "手机号码",
prop: "mobile",
search: true
},
{
label: "所属组织",
prop: "deptName",
search: true,
}
]
};
<template>
<basic-container>
<avue-crud :data="data" :search.sync="search" :option="option" :page.sync="page" :table-loading="loading"
@search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
@size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
<template slot-scope="scope" slot="approvalStatus">
<span v-if="scope.row.approvalStatus === 0"
class="el-tag el-tag--warning el-tag--small el-tag--light">待审批</span>
<span v-if="scope.row.approvalStatus === 1"
class="el-tag el-tag--success el-tag--small el-tag--light">已审批</span>
</template>
//在option中配置slot为true
//slot = 变量+Search
<template slot="updaterNameSearch">
<el-select v-model="search.creator" filterable clearable placeholder="请选择">
<el-option v-for="item in dataList" :key="item.id" :label="item.realName" :value="item.id">
</el-option>
</el-select>
</template>
<template slot="createDateSearch">
<el-date-picker v-model="searchDate" type="datetimerange" range-separator="~" format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</template>
<template slot="menu" slot-scope="scope">
<span v-if="scope.row.approvalStatus === 0">
<el-button type="text" size="mini" @click="approvalClick(scope.row.id)" v-if="permission['approval']">审批</el-button>
</span>
<span v-if="scope.row.approvalStatus === 1">
<el-button type="text" size="mini"
@click="viewClick(scope.row.id)" v-if="permission['approvalView']">查看</el-button>
</span>
</template>
</avue-crud>
</basic-container>
</template>
效果图:
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="短信内容:">
<div v-html="ruleForm.assessment" v-if="type !== 'add'"></div>
<avue-ueditor v-model="ruleForm.assessment" v-if="type === 'add'"
:options="editorOptions"></avue-ueditor>
</el-form-item>
</el-col>
</el-row>