目录
筛选
HTML
scss*
filterComp
排序
表格
自定义数据样式
inner-table
分页
删除
default-modal
自定义元素的插槽-占位符
.search-wrap {height: 60px;display: flex;align-items: center;overflow: hidden;padding: 0 20px;.selected-options-wrap {flex: 1;.clear-btn {display: inline-block;text-align: center;color: #dd2100;margin-left: 12px;padding: 0 6px;border-radius: 4px;background-color: rgba(221, 33, 0, .1);cursor: pointer;}}.mds-tag {padding-right: 0;margin-left: 8px;border-radius: 4px;border: 1px solid #d9ecff;cursor:default;.mds-btn {height: auto;}}.mds-input-search {width: 240px;::v-deep .mds-input {border-radius: 4px;}}.filter-btn {margin-left: 12px;position: relative;.mds-btn {padding: 0;width: 32px;height: 32px;}.filter-count {width: 18px;height: 18px;line-height: 18px;text-align: center;position: absolute;top: -9px;right: -9px;color: #fff;background-color: #0364ff;border-radius: 50%;}.filter-icon {width: 28px;height: 28px;object-fit: cover;position: relative;top: 1px;}.filter-num {position: absolute;top: -10px;right: -2px;width: 16px;height: 16px;border-radius: 50%;background-color: #1564ff;color: #fff;font-size: 12px;line-height: 16px;}}
}filterComp
<template><mds-drawertitle="条件筛选":visibility="visibility"size="720px"@close="cancelFilterDrawer"><mds-form label-width="100px" :model="filterList" label-position="right"><mds-form-item label="发布状态"><mds-select placeholder="发布状态" style="width: 100%" clearable v-model="filterList.releStat"><mds-option label="未发布" value="0" /><mds-option label="已发布" value="1" /></mds-select></mds-form-item>
...<mds-form-item label="更新时间"><mds-date-pickerv-model="timeArr"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"format="yyyy-MM-dd"value-format="yyyy-MM-dd"@change="changeTime"></mds-date-picker></mds-form-item></mds-form><template slot="footer"><mds-button @click="cancelFilterDrawer">取消</mds-button><mds-button type="primary" @click="saveFilter">确认</mds-button></template></mds-drawer>
</template><script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'@Component({components: {}
})
export default class FilterComp extends Vue {@Prop({ required: true }) private visibility!: booleantimeArr = []filterList: any = {moduTyp: '', // 模块releStat: "", //发布状态updateStartDate: '',updateEndDate: ''}// 修改时间changeTime(val: any) {this.filterList.updateStartDate = val ? val[0] : ''this.filterList.updateEndDate = val ? val[1] : ''}// 清除选项clearOptions(option: string) {if (option === 'all') {this.filterList = {}this.timeArr = []} else if (option === 'time') {this.filterList.updateStartDate = ''this.filterList.updateEndDate = ''this.timeArr = []} else {this.filterList[option] = ''}this.saveFilter()}// 取消筛选cancelFilterDrawer() {this.$emit('update:visibility', false)}// 保存筛选saveFilter() {const data = {...this.filterList}this.$emit('changeFilter', data)this.cancelFilterDrawer()}
}
</script><mds-option label="未发布" value="0" /> string
<mds-option label="未发布" :value="0" /> number
排序
<el-table :data="tableData" header-row-class-name="table-header" @sort-change="sortChange">
....
</el-table> confirmpageQuery() {this.loading = trueconst params = {pageNum: this.pageInfo.currentPage,pageSize: this.pageInfo.pageSize,moduTyp: '',releStat: "",fuzzySearch: this.searchVal,updateStartDate: "",// updateEndDate: "",updateEndDate: "",...this.filterData,...this.sortProps}confirmpageQuery(params).then((res: any) => {if (res && res.code == 200) {this.pageInfo.total = res.data.totalElementsthis.tableData = res.data.data || []this.permissionMap = res.data.permissionMap || {}}}).catch((e: any) => {this.$message.error(e && e.msg)}).finally(() => {this.loading = false})}class YourClass {// 定义 sortProps 对象，用于存储排序属性的状态sortProps: any = {versionNumSort: '',releStatSort: '',updateDateSort: ''}// sortChange 方法用于处理排序变化sortChange(arguments: any) {const { column, prop, order } = arguments// 定义 orderVal 对象，用于存储排序方式的值（升序和降序）const orderVal: any = {ascending: 1,descending: 0}// 定义 propName 对象，用于映射排序属性和 sortProps 对象的属性名const propName: any = {versionNum: 'versionNumSort',releStat: 'releStatSort',updTm: 'updateDateSort'}// 将 sortProps 对象中所有属性的值初始化为空，以便重新设置排序状态for (let key in this.sortProps) {this.sortProps[key] = ''}// 根据传入的排序属性和排序方式，更新 sortProps 对象中对应的属性值this.sortProps[propName[prop]] = orderVal[order]// 调用 confirmpageQuery 方法，可能是用于触发其他逻辑或执行查询等操作this.confirmpageQuery()}// 定义 confirmpageQuery 方法，可能是其他逻辑处理的入口confirmpageQuery() {// 在这里执行其他逻辑或查询操作// ...}
}
表格
<el-table :data="tableData" header-row-class-name="table-header" @sort-change="sortChange"><!-- 展开 --><el-table-column width="30" type="expand" class-name="expend-row"><!-- 自定义样式slot-scope="scope" {{ scope_sub.row.confmVersion }} --><template slot-scope="scope"><el-table :data="scope.row.confmReleVOS" style="width: 100%;margin: 0;" class="inner-table"><!-- 缩进 --><el-table-column width="30"></el-table-column><el-table-column prop="confmVersion" label="版本号" width="120"><template slot-scope="scope_sub"><div>{{ scope_sub.row.confmVersion }}<span v-if="scope_sub.row.isCurrentVersion" class="version-current">当前版本</span></div></template></el-table-column><el-table-column prop="name" label="生效区间" width="220"><template slot-scope="scope_sub">{{ scope_sub.row.effectiveDateRange }}</template></el-table-column><el-table-column prop="releName" label="发布名称" /><!-- show-overflow-tooltip在用户将鼠标悬停在容器上时显示一个工具提示，以显示溢出的内容 --><el-table-column prop="releDesc" label="发布说明" show-overflow-tooltip /><el-table-column label="操作" width="150"><template slot-scope="scope_sub"><!-- <span v-if="permissionMap.hasWorkbenchPageReleaseViewPer" class="table-operate" @click="toDetail(scope.row, scope_sub.row)">查看</span> --><span class="table-operate" @click="toDetail(scope.row, scope_sub.row)">查看</span></template></el-table-column></el-table></template></el-table-column><el-table-column prop="confmNm" label="数据确认版本名称" min-width="120" show-overflow-tooltip /><el-table-column prop="moduTyp" label="模块" width="170" /><el-table-column prop="releStat" label="当前状态" sortable="custom" width="120"><template slot-scope="scope"><div :class="{ 'status-published': scope.row.releStat === 1, 'status-unpublished': scope.row.releStat === 0 }">{{ scope.row.releStatNm }}</div><!-- <div class="status-published" v-if="scope.row.releStat === 1">{{ scope.row.releStatNm }}</div><div class="status-unpublished" v-if="scope.row.releStat === 0">{{ scope.row.releStatNm }}</div> --></template></el-table-column><el-table-column prop="versionNum" label="版本数" sortable="custom" width="90" /><el-table-column prop="creator" label="创建人" width="120" /><el-table-column prop="updTm" label="更新时间" width="180" sortable="custom" /><!-- <el-table-column label="操作" width="220"><template slot-scope="scope"><span v-if="permissionMap.hasWorkbenchPageConfigEditPer" class="table-operate" @click="toEdit(scope.row)">编辑</span><span v-if="permissionMap.hasWorkbenchPageConfigReleasePer" class="table-operate" @click="handlePublish(scope.row)">{{ scope.row.releStat === 0 ? '发布' : scope.row.releStat === 1 ? '再次发布' : '' }}</span><span v-if="permissionMap.hasWorkbenchPageConfigDeletePer" class="table-operate" @click="handleDelete(scope.row)">删除</span></template></el-table-column> --><el-table-column label="操作" width="220"><template slot-scope="scope"><span class="table-operate" @click="toEdit(scope.row)">编辑</span><span class="table-operate" @click="handlePublish(scope.row)">{{ scope.row.releStat === 0 ? '发布' : scope.row.releStat === 1 ? '再次发布' : '' }}</span><span class="table-operate" @click="handleDelete(scope.row)">删除</span></template></el-table-column></el-table>自定义数据样式
<el-table-column prop="releStat" label="当前状态" sortable="custom" width="120"><template slot-scope="scope"><div :class="{ 'status-published': scope.row.releStat === 1, 'status-unpublished': scope.row.releStat === 0 }">{{ scope.row.releStatNm }}</div></el-table-column>inner-table
分页
删除
loading
添加slot=footer覆盖原有样式
default-modal
<template><mds-modalclass="confirm-delete-modal":class="{ 'confirm-delete-modal-warning': type === 'warning' }":visibility="visibility":title="title":width="width":show-close="false"><div v-if="content" class="content">{{ content }}</div><slot></slot><span slot="footer" class="mds-dialog-footer"><mds-button @click="footActionClick('cancel')">{{ cancelText }}</mds-button><mds-buttontype="primary":loading="loading"@click="footActionClick('confirm')"><mds-icon v-if="loading" type="line-sync" class="mds-btn-right" spin />{{ confirmText }}</mds-button></span></mds-modal>
</template><script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'@Component({components: {}
})
export default class defaultModal extends Vue {@Prop({ required: true }) private visibility!: boolean// ! 表示非空断言，告诉 TypeScript 该属性不会为 null 或 undefined@Prop({ required: true }) private title!: string// ?: string 表示 content 是一个可选的属@Prop() private content?: string@Prop({ default: '420px' }) private width!: string@Prop({ default: false }) private showClose!: boolean@Prop({ default: '确定' }) private confirmText!: string@Prop({ default: '取消' }) private cancelText!: string@Prop({ default: 'normal' }) private type!: string@Prop({default: () => {return (cb: any) => {cb && cb()}}})private confirmCb!: any@Prop({default: () => {return (cb: any) => {cb && cb()}}})private cancelCb!: anyprivate loading = falseprivate loadingIns = {start: this.changeLoading.call(this, true),end: this.changeLoading.call(this, false)}private changeLoading(bool = false): any {return () => {this.loading = bool}}private footActionClick(type = 'cancel'): void {if (this.loading) returnconst cb = () => {this.$emit('update:visibility', false)}if (type === 'cancel') {this.cancelCb(cb, this.loadingIns)}if (type === 'confirm') {this.confirmCb(cb, this.loadingIns)}}private handleClose(done: any): void {if (this.loading) returnthis.$emit('update:visibility', false)}
}
</script><style lang="scss" scoped>
// ::v-deep .mds-modal-mask, .mds-modal-wrap {
// z-index: 2000;
// }
.confirm-delete-modal {::v-deep {.mds-modal-title {display: flex;align-content: center;// &::before {// content: '\EBD2';// color: #3370ff;// display: inline-block;// font-family: 'mdsicon';// font-size: 22px;// margin-right: 16px;// }}.mds-modal-bottom {border: none;}}.content {padding-left: 38px;}
}.confirm-delete-modal-warning {// ::v-deep .mds-modal-title {// &::before {// content: '\EBC9';// color: #f80;// }// }.mds-dialog-footer {margin-top: 16px;font-size: 14px;text-align: right;// .mds-btn {// font-size: 12px;// height: 28px;// line-height: 20px;// min-width: 48px;// padding: 3px 7px;// color: #383c41;// &:hover {// background-color: #eee;// border-color: #d9d9d9;// }// &:last-child {// color: #f54a45;// border-color: #f54a45;// &:hover {// background-color: rgb(255, 233, 233);// }// }// }.mds-btn-loading {background-color: transparent;}}
}::v-deep .mds-modal-body {min-height: 0;
}
</style>
自定义元素的插槽-占位符
<!-- 自定义元素定义 -->
<custom-element><h1><slot></slot></h1><p>This is some default content.</p>
</custom-element><!-- 使用自定义元素 -->
<custom-element>Hello, I am inserted into the slot!
</custom-element>
<!-- 删除二次确认弹窗 --><default-modal :visibility.sync="defaultModalInfo.visibility" :type="defaultModalInfo.type":title="defaultModalInfo.title" :content="defaultModalInfo.content" :confirm-text="defaultModalInfo.confirmText":cancel-text="defaultModalInfo.cancelText" :confirm-cb="defaultModalInfo.confirmCb"><div><mds-icon type="fill-solid-exclamation-circle" style="color:#e6a23c;font-size:18px" />确定要删除数据吗?</div></default-modal>
// 删除
handleDelete(row: any) {// 创建一个对象来设置模态框的信息this.defaultModalInfo = {visibility: true, // 设置模态框可见性为true，即显示模态框type: 'warning', // 设置模态框类型为警告，可以根据需要修改为其他类型title: '提示', // 设置模态框标题为'提示'content: '', // 设置模态框内容为空，可以根据需要填充具体的提示信息confirmText: '确定', // 设置确认按钮文本为'确定'cancelText: '取消', // 设置取消按钮文本为'取消'// @ts-ignore: 不可达代码错误（这里是为了忽略可能出现的编译错误，因为后面的 confirmCb 函数在当前环境下可能无法触发）confirmCb: (...args: any) => this.confirmDelete(row.id, ...args) // 设置确认按钮点击后的回调函数，传入当前行的id以及可能的其他参数};
}// 确认删除
private async confirmDelete(id: number, cb: any, loadingIns: any) {// 如果loadingIns存在并且具有start方法，则调用它，用于开始加载状态loadingIns && loadingIns.start && loadingIns.start();// 调用服务器端接口执行删除操作，传入id参数const res: any = await confirmpageDelete(id);// 如果loadingIns存在并且具有end方法，则调用它，用于结束加载状态loadingIns && loadingIns.end && loadingIns.end();// 如果服务器返回结果为空或者code不等于200，则删除失败，不做任何操作if (!res || res.code != 200) {// 可以根据需要，使用某种方式显示删除失败的提示信息，这里是注释掉的代码// this.$message.error(res && res.msg)return;}// 如果传入了回调函数cb，则执行回调函数cb && cb();// 使用消息框提示删除成功this.$message.success('删除成功');// 调用刷新列表的方法，以更新数据this.confirmpageQuery();
}
)
