Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
0fb2eec1 by 任超
Options

style:登记情形设定

1 parent d07f7e05
Inline Side-by-side
Showing 7 changed files with 240 additions and 65 deletions
import lbTable from './lb-table.vue'
export default {
install:(Vue) => {
Vue.component('lbTable',lbTable);
}
}
\ No newline at end of file
......@@ -17,7 +17,7 @@
:index="column.index"
:column-key="column.columnKey"
:width="column.width"
:min-width="setColumnWidth(column.label)"
:min-width="column.minWidth"
:fixed="column.fixed"
:scoped-slot="column.renderHeader"
:sortable="column.sortable || false"
......@@ -26,9 +26,9 @@
:sort-orders="column.sortOrders"
:resizable="column.resizable || true"
:formatter="column.formatter"
:show-overflow-tooltip="column.showOverflowTooltip != null ? column.showOverflowTooltip : true"
:align="column.align!=null ? column.align : 'left'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'left'"
:show-overflow-tooltip="column.showOverflowTooltip || false"
:align="column.align || align || 'center'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
:class-name="column.className"
:label-class-name="column.labelClassName"
:selectable="column.selectable"
......@@ -76,27 +76,6 @@ export default {
LbRender
},
methods: {
setColumnWidth(str) {
let columnWidth = 0;
for (let char of str) {
if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
// 如果是英文字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
columnWidth += 10
} else if (char >= '\u4e00' && char <= '\u9fa5') {
// 如果是中文字符，为字符分配14个单位宽度，单位宽度可根据字体大小调整
columnWidth += 14
} else {
// 其他种类字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
columnWidth += 10
}
}
if (columnWidth < 120) {
// 设置最小宽度
columnWidth = 120
}
return columnWidth + 'px'
},
setColumn () {
if (this.column.type) {
this.column.renderHeader = forced[this.column.type].renderHeader
......
......@@ -10,14 +10,15 @@
<template>
<div :class="['lb-table', customClass]">
<el-table ref="elTable" :row-class-name="tableRowClassName" :border="border" :show-header='showHeader'
:header-cell-style="{ background: '#F8FAFA' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
<el-table ref="elTable" :border='border' :row-class-name="tableRowClassName" :show-header='showHeader'
:header-cell-style="{ background: '#f5f7fa' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
:data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<br>
<el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
:page-sizes="[10, 15, 20, 50]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
:page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
:style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
</el-pagination>
</div>
......@@ -48,7 +49,7 @@ export default {
},
heightNum: {
type: Number,
default: 275,
default: 285,
},
heightNumSetting: {
type: Boolean,
......@@ -60,7 +61,7 @@ export default {
},
paginationAlign: {
type: String,
default: 'right',
default: 'left',
},
merge: Array,
},
......@@ -77,9 +78,6 @@ export default {
created () {
this.getMergeArr(this.data, this.merge)
this.getHeight()
},
mounted () {
},
computed: {
dataLength () {
......@@ -176,33 +174,11 @@ export default {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" >
<style rel="stylesheet/scss" lang="scss">
.lb-table {
.interlaced {
background: #FCFDFD;
;
border: 1px solid #ECECEE;
}
.el-table {
border: 1px solid #ECECEE;
border-radius: 4px 4px 0 0;
}
.el-table::before {
display: none;
background: #fafcff;
border: 1px solid #ebf2fa;
}
.el-table--enable-row-hover .el-table__body tr:hover>td {
background: #FBFCFD !important;
}
}
.el-table th>.cell {
padding-left: 20px;
}
.el-table .cell {
padding-left: 20px;
}
</style>
......
......@@ -225,6 +225,7 @@ input[type="number"] {
.lb-table .el-table {
border: 1px solid #E4EBF4;
border-bottom: none;
border-radius: 4px 4px 0 0;
}
......
import { Message } from "element-ui";
// 上移下移
export function upward (index, data) {
if (index > 0) {
let upData = data[index - 1];
data.splice(index - 1, 1);
data.splice(index, 0, upData);
} else {
Message({
message: '已经是第一条，上移失败',
});
}
}
export function down (index, data) {
if ((index + 1) == data.length) {
Message({
message: '已经是最后一条，下移失败',
});
} else {
let downData = data[index + 1];
data.splice(index + 1, 1);
data.splice(index, 0, downData);
}
}
\ No newline at end of file
<!--
功能：登记情形设定
-->
<template>
<div class='该组件名称'>
<el-form :model="ruleForm" :rules="rules" label-width="135px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="登记业务编码" prop="djywbm">
<el-input v-model="ruleForm.djywbm"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="登记业务名称" prop="djywmc">
<el-input v-model="ruleForm.djywmc"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<lb-table :column="column" border :key="key" :heightNum="390" :pagination="false" heightNumSetting
:data="tableData">
</lb-table>
</div>
</template>
<script>
import { upward, down } from '@/utils/operation'
export default {
data () {
return {
key: 0,
ruleForm: {
djywbm: '',
djywmc: ''
},
mcOptions: [
{
name: '买卖',
value: '1'
},
{
name: '买卖继承',
value: '2'
}
],
rules: {
djywbm: [
{ required: true, message: '登记业务编码', trigger: 'blur' },
],
djywmc: [
{ required: true, message: '登记业务名称', trigger: 'blur' },
],
},
column: [
{
width: '60',
renderHeader: (h, scope) => {
return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
},
render: (h, scope) => {
return (
<i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
)
}
},
{
width: '60',
label: '序号',
type: 'index'
},
{
prop: 'djqxbm',
label: '登记情形编码',
render: (h, scope) => {
return (
<el-input placeholder="登记情形编码" value={scope.row[scope.column.property]}
onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
)
}
},
{
prop: 'djqxmc',
label: '登记情形名称',
render: (h, scope) => {
return (
<el-input placeholder="登记情形名称" value={scope.row[scope.column.property]}
onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
)
}
},
{
label: '是否启用登记情形',
width: '160',
render: (h, scope) => {
return (
<el-radio-group v-model={scope.row.sfqy} onChange={(val) => { scope.row[scope.column.property] = val }}>
<el-radio label={1}>启用</el-radio>
<el-radio label={0}>禁用</el-radio>
</el-radio-group>
)
}
},
{
prop: 'djyymb',
label: '登记原因模板',
render: (h, scope) => {
return (
<el-input placeholder="登记原因模板" value={scope.row[scope.column.property]}
onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
)
}
},
{
label: '是否启用模板',
width: '160',
render: (h, scope) => {
return (
<el-radio-group v-model={scope.row.sfqymb} onChange={(val) => { scope.row[scope.column.property] = val }}>
<el-radio label={1}>启用</el-radio>
<el-radio label={0}>禁用</el-radio>
</el-radio-group>
)
}
},
{
label: '移动',
width: '90',
render: (h, scope) => {
return (
<div>
<i class="el-icon-top pointer" disabled={scope.$index == 0} style="color:#409EFF" onClick={() => { this.moveUpward(scope.$index, scope.row) }}></i>
<i class="el-icon-bottom pointer" disabled={(scope.$index + 1) == this.tableData.length} style="color:#409EFF" onClick={() => { this.moveDown(scope.$index, scope.row) }}></i>
</div>
)
}
}
],
tableData: [{
djqxmc: '',
djqxbm: '',
djyymb: '',
sfqymb: 1,
sfqy: 1
},
{
djqxmc: '',
djqxbm: '',
djyymb: '',
sfqymb: 0,
sfqy: 0
}]
}
},
watch: {
tableData: {
handler (newValue, oldValue) {
this.$emit('updateValue', newValue)
},
deep: true
}
},
methods: {
handleAdd () {
this.tableData.push(
{
djqxmc: '',
djqxbm: '',
djyymb: '',
sfqymb: 0,
sfqy: 0
}
)
},
handleMinus () { },
// 上移下移
moveUpward (index, row) {
upward(index, this.tableData)
this.key++
},
moveDown (index, row) {
down(index, this.tableData)
this.key++
},
}
}
</script>
<style scoped lang='scss'>
</style>
\ No newline at end of file
......@@ -7,7 +7,7 @@
}}</li>
</ul>
<div class="sqywgz-edit-right">
<el-form :model="ruleForm" :rules="rules" label-width="135px" ref="ruleForm">
<el-form :model="ruleForm" v-if="n == 0" :rules="rules" label-width="135px" ref="ruleForm">
<el-row>
<el-col :span="8">
<el-form-item label="权利类型编码" prop="qllxbm">
......@@ -28,8 +28,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="登记类型编码" prop="djlxbm">
......@@ -50,7 +48,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="登记业务编码" prop="djywbm">
......@@ -63,7 +60,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="是否启用" prop="sfqy">
......@@ -79,7 +75,6 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="登记情形及材料" prop="djqxcl">
......@@ -93,7 +88,6 @@
</el-upload>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="登记原因设置" prop="djyysz">
......@@ -113,6 +107,7 @@
</el-col>
</el-row>
</el-form>
<djqxsd v-else-if="n == 1" @updateValue="getValue" />
</div>
</div>
</dialogBox>
......@@ -120,7 +115,11 @@
<script>
import fileController from '@/api/fileController'
import djqxsd from './djqxsd.vue'
export default {
components: {
djqxsd
},
props: {
value: { type: Boolean, default: false },
},
......@@ -208,6 +207,9 @@ export default {
};
},
methods: {
getValue (val) {
console.log(val);
},
submitForm () {
this.$refs['ruleForm'].validate(async (valid) => {
if (valid) {
......