项目平台 开发规范
1、页面
1.1 iviewui 组件
- Form label-width="120"
<Form inline :label-width="120" label-colon>
- DatePicker
- date 宽度 180px
- daterange 宽度 250px
<DatePicker type="date" style="width: 180px"></DatePicker>
<DatePicker type="daterange" style="width: 250px" ></DatePicker>
- Select 宽度 180px
<Select style="width: 180px"></Select>
- Page 分页定位
<div class="margin-col-30">
<Table :columns="columns" :data="list"></Table>
</div>
<div class="page">
<Page :total="100" :page-size="25" show-total show-elevator></Page>
</div>
1.2 弹框
- 弹框尽量拆成组件 导入到主界面
2 class层叠样式
- margin 可替换数字:5 15 20 25 30
.margin-5 { margin: 5px; }
.margin-col-5 { margin: 5px 0; }
.margin-row-5 { margin: 0 5px; }
.margin-t-5 { margin-top: 5px; }
.margin-r-5 { margin-right: 5px; }
.margin-b-5 { margin-bottom: 5px; }
.margin-l-5 { margin-left: 5px; }
.margin-15 { margin: 15px; }
.margin-col-15 { margin: 15px 0; }
.margin-row-15 { margin: 0 15px; }
.margin-t-15 { margin-top: 15px; }
.margin-r-15 { margin-right: 15px; }
.margin-b-15 { margin-bottom: 15px; }
.margin-l-15 { margin-left: 15px; }
- padding 可替换数字:5 15 20 25 30
.padding-5 { padding: 5px; }
.padding-col-5 { padding: 5px 0; }
.padding-row-5 { padding: 0 5px; }
.padding-t-5 { padding-top: 5px; }
.padding-r-5 { padding-right: 5px; }
.padding-b-5 { padding-bottom: 5px; }
.padding-l-5 { padding-left: 5px; }
.padding-15 { padding: 15px; }
.padding-col-15 { padding: 15px 0; }
.padding-row-15 { padding: 0 15px; }
.padding-t-15 { padding-top: 15px; }
.padding-r-15 { padding-right: 15px; }
.padding-b-15 { padding-bottom: 15px; }
.padding-l-15 { padding-left: 15px; }
- .page
.page { text-align: right; margin: 30px 0; }
- .md-table
<table class="md-table">
<tr>
<th>客户编号:</th>
<td>6245375675457</td>
<th>客户编号:</th>
<td>6245375675457</td>
</tr>
<tr>
<th>客户编号:</th>
<td>6245375675457</td>
<th>客户编号:</th>
<td>6245375675457</td>
</tr>
<tr>
<th>统一社会信用编号:</th>
<td>6245375675457</td>
<th>客户编号:</th>
<td>6245375675457</td>
</tr>
</table>
/**
统一table 表格样式,用于数据展示
*/
.md-table {
width: 100%;
border-spacing: 0;
table-layout: fixed;
border-collapse: collapse;
td {
border: 1px solid #e8eaec;
height: 40px;
padding: 8px 15px;
word-wrap: break-word;
}
th {
width: 180px;
padding: 0px 15px;
background-color: #f8f8f9;
color: #515a6e;
text-align: right;
border: 1px solid #e8eaec;
font-weight: normal;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
3 通用模板
- 弹窗
弹窗文件
<template>
<Modal v-model="isShowModal" :title="title" width="1000" class="sortModal" footer-hide>
<div>add-customer-info 新增客户注册申请单</div>
</Modal>
</template>
<script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
@Component
export default class AddCustomerInfo extends Vue {
@Prop({type: Boolean, default: false}) value!: boolean;
private loading = false;
private isShowModal = this.value;
private title = '新客户注册申请单';
@Watch('value')
openCompanyListModal() {
this.isShowModal = true;
this.loading = false;
}
}
</script>
<style scoped lang="less">
</style>
调用文件
<template>
<div>
<AddCustomerInfo v-model="isAddCustomerInfoModel"></AddCustomerInfo>
</div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import AddCustomerInfo from './components/add-customer-info.vue';
@Component({
components: {AddCustomerInfo}
})
export default class CustomerAdd extends Vue {
private isAddCustomerInfoModel = false;
private openAddCustomerInfoModal() {
this.isAddCustomerInfoModel = !this.isAddCustomerInfoModel;
}
}
</script>
<style scoped lang="less">
</style>
- 表单操作栏 详情 编辑 删除按钮
{
key: 'index',
title: '操作',
width: 200,
fixed: 'right',
render: (h: any, params: any) => {
const btnGroup = [];
btnGroup.push(
h('Button', {
class: ['margin-5'],
attrs: {
type: 'info',
ghost: true,
size: 'small'
},
on: {
click: () => {
// this.setCompanyInfo(params.row);
}
}
}, '详情')
);
btnGroup.push(
h('Button', {
class: ['margin-5'],
attrs: {
type: 'success',
ghost: true,
size: 'small'
},
on: {
click: () => {
// this.setCompanyInfo(params.row);
}
}
}, '编辑')
);
btnGroup.push(
h('Button', {
class: ['margin-5'],
attrs: {
type: 'error',
ghost: true,
size: 'small'
},
on: {
click: () => {
this.$Modal.confirm({
content: '是否确认删除该?',
okText: '确认',
cancelText: '取消',
onOk: () => {
// this.delCompanyInfoDataAction(params.row.companySixiId);
}
});
}
}
}, '删除')
);
return h('div', {}, btnGroup);
}
}