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
1 import lbTable from './lb-table.vue'
2 export default {
3 install:(Vue) => {
4 Vue.component('lbTable',lbTable);
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 :index="column.index" 17 :index="column.index"
18 :column-key="column.columnKey" 18 :column-key="column.columnKey"
19 :width="column.width" 19 :width="column.width"
20 :min-width="setColumnWidth(column.label)" 20 :min-width="column.minWidth"
21 :fixed="column.fixed" 21 :fixed="column.fixed"
22 :scoped-slot="column.renderHeader" 22 :scoped-slot="column.renderHeader"
23 :sortable="column.sortable || false" 23 :sortable="column.sortable || false"
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
26 :sort-orders="column.sortOrders" 26 :sort-orders="column.sortOrders"
27 :resizable="column.resizable || true" 27 :resizable="column.resizable || true"
28 :formatter="column.formatter" 28 :formatter="column.formatter"
29 :show-overflow-tooltip="column.showOverflowTooltip != null ? column.showOverflowTooltip : true" 29 :show-overflow-tooltip="column.showOverflowTooltip || false"
30 :align="column.align!=null ? column.align : 'left'" 30 :align="column.align || align || 'center'"
31 :header-align="column.headerAlign || headerAlign || column.align || align || 'left'" 31 :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
32 :class-name="column.className" 32 :class-name="column.className"
33 :label-class-name="column.labelClassName" 33 :label-class-name="column.labelClassName"
34 :selectable="column.selectable" 34 :selectable="column.selectable"
...@@ -76,27 +76,6 @@ export default { ...@@ -76,27 +76,6 @@ export default {
76 LbRender 76 LbRender
77 }, 77 },
78 methods: { 78 methods: {
79
80 setColumnWidth(str) {
81 let columnWidth = 0;
82 for (let char of str) {
83 if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
84 // 如果是英文字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
85 columnWidth += 10
86 } else if (char >= '\u4e00' && char <= '\u9fa5') {
87 // 如果是中文字符，为字符分配14个单位宽度，单位宽度可根据字体大小调整
88 columnWidth += 14
89 } else {
90 // 其他种类字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
91 columnWidth += 10
92 }
93 }
94 if (columnWidth < 120) {
95 // 设置最小宽度
96 columnWidth = 120
97 }
98 return columnWidth + 'px'
99 },
100 setColumn () { 79 setColumn () {
101 if (this.column.type) { 80 if (this.column.type) {
102 this.column.renderHeader = forced[this.column.type].renderHeader 81 this.column.renderHeader = forced[this.column.type].renderHeader
......
...@@ -10,14 +10,15 @@ ...@@ -10,14 +10,15 @@
10 10
11 <template> 11 <template>
12 <div :class="['lb-table', customClass]"> 12 <div :class="['lb-table', customClass]">
13 <el-table ref="elTable" :row-class-name="tableRowClassName" :border="border" :show-header='showHeader' 13 <el-table ref="elTable" :border='border' :row-class-name="tableRowClassName" :show-header='showHeader'
14 :header-cell-style="{ background: '#F8FAFA' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners" 14 :header-cell-style="{ background: '#f5f7fa' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
15 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod"> 15 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
16 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item"> 16 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
17 </lb-column> 17 </lb-column>
18 </el-table> 18 </el-table>
19 <br>
19 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background 20 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
20 :page-sizes="[10, 15, 20, 50]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange" 21 :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
21 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }"> 22 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
22 </el-pagination> 23 </el-pagination>
23 </div> 24 </div>
...@@ -48,7 +49,7 @@ export default { ...@@ -48,7 +49,7 @@ export default {
48 }, 49 },
49 heightNum: { 50 heightNum: {
50 type: Number, 51 type: Number,
51 default: 275, 52 default: 285,
52 }, 53 },
53 heightNumSetting: { 54 heightNumSetting: {
54 type: Boolean, 55 type: Boolean,
...@@ -60,7 +61,7 @@ export default { ...@@ -60,7 +61,7 @@ export default {
60 }, 61 },
61 paginationAlign: { 62 paginationAlign: {
62 type: String, 63 type: String,
63 default: 'right', 64 default: 'left',
64 }, 65 },
65 merge: Array, 66 merge: Array,
66 }, 67 },
...@@ -77,9 +78,6 @@ export default { ...@@ -77,9 +78,6 @@ export default {
77 created () { 78 created () {
78 this.getMergeArr(this.data, this.merge) 79 this.getMergeArr(this.data, this.merge)
79 this.getHeight() 80 this.getHeight()
80
81 },
82 mounted () {
83 }, 81 },
84 computed: { 82 computed: {
85 dataLength () { 83 dataLength () {
...@@ -176,33 +174,11 @@ export default { ...@@ -176,33 +174,11 @@ export default {
176 }, 174 },
177 } 175 }
178 </script> 176 </script>
179 <style rel="stylesheet/scss" lang="scss" > 177 <style rel="stylesheet/scss" lang="scss">
180 .lb-table { 178 .lb-table {
181 .interlaced { 179 .interlaced {
182 background: #FCFDFD; 180 background: #fafcff;
183 ; 181 border: 1px solid #ebf2fa;
184 border: 1px solid #ECECEE;
185 }
186
187 .el-table {
188 border: 1px solid #ECECEE;
189 border-radius: 4px 4px 0 0;
190 }
191
192 .el-table::before {
193 display: none;
194 } 182 }
195
196 .el-table--enable-row-hover .el-table__body tr:hover>td {
197 background: #FBFCFD !important;
198 }
199 }
200
201 .el-table th>.cell {
202 padding-left: 20px;
203 }
204
205 .el-table .cell {
206 padding-left: 20px;
207 } 183 }
208 </style> 184 </style>
......
...@@ -225,6 +225,7 @@ input[type="number"] { ...@@ -225,6 +225,7 @@ input[type="number"] {
225 225
226 .lb-table .el-table { 226 .lb-table .el-table {
227 border: 1px solid #E4EBF4; 227 border: 1px solid #E4EBF4;
228 border-bottom: none;
228 border-radius: 4px 4px 0 0; 229 border-radius: 4px 4px 0 0;
229 } 230 }
230 231
......
1 import { Message } from "element-ui";
2 // 上移下移
3 export function upward (index, data) {
4 if (index > 0) {
5 let upData = data[index - 1];
6 data.splice(index - 1, 1);
7 data.splice(index, 0, upData);
8 } else {
9 Message({
10 message: '已经是第一条，上移失败',
11 });
12 }
13 }
14 export function down (index, data) {
15 if ((index + 1) == data.length) {
16 Message({
17 message: '已经是最后一条，下移失败',
18 });
19 } else {
20 let downData = data[index + 1];
21 data.splice(index + 1, 1);
22 data.splice(index, 0, downData);
23 }
24 }
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 功能：登记情形设定
3 -->
4 <template>
5 <div class='该组件名称'>
6 <el-form :model="ruleForm" :rules="rules" label-width="135px">
7 <el-row :gutter="20">
8 <el-col :span="8">
9 <el-form-item label="登记业务编码" prop="djywbm">
10 <el-input v-model="ruleForm.djywbm"></el-input>
11 </el-form-item>
12 </el-col>
13 <el-col :span="16">
14 <el-form-item label="登记业务名称" prop="djywmc">
15 <el-input v-model="ruleForm.djywmc"></el-input>
16 </el-form-item>
17 </el-col>
18 </el-row>
19 </el-form>
20 <lb-table :column="column" border :key="key" :heightNum="390" :pagination="false" heightNumSetting
21 :data="tableData">
22 </lb-table>
23 </div>
24 </template>
25 <script>
26 import { upward, down } from '@/utils/operation'
27 export default {
28 data () {
29 return {
30 key: 0,
31 ruleForm: {
32 djywbm: '',
33 djywmc: ''
34 },
35 mcOptions: [
36 {
37 name: '买卖',
38 value: '1'
39 },
40 {
41 name: '买卖继承',
42 value: '2'
43 }
44 ],
45 rules: {
46 djywbm: [
47 { required: true, message: '登记业务编码', trigger: 'blur' },
48 ],
49 djywmc: [
50 { required: true, message: '登记业务名称', trigger: 'blur' },
51 ],
52 },
53 column: [
54 {
55 width: '60',
56 renderHeader: (h, scope) => {
57 return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
58 },
59 render: (h, scope) => {
60 return (
61 <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
62 )
63 }
64 },
65 {
66 width: '60',
67 label: '序号',
68 type: 'index'
69 },
70 {
71 prop: 'djqxbm',
72 label: '登记情形编码',
73 render: (h, scope) => {
74 return (
75 <el-input placeholder="登记情形编码" value={scope.row[scope.column.property]}
76 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
77 )
78 }
79 },
80 {
81 prop: 'djqxmc',
82 label: '登记情形名称',
83 render: (h, scope) => {
84 return (
85 <el-input placeholder="登记情形名称" value={scope.row[scope.column.property]}
86 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
87 )
88 }
89 },
90 {
91 label: '是否启用登记情形',
92 width: '160',
93 render: (h, scope) => {
94 return (
95 <el-radio-group v-model={scope.row.sfqy} onChange={(val) => { scope.row[scope.column.property] = val }}>
96 <el-radio label={1}>启用</el-radio>
97 <el-radio label={0}>禁用</el-radio>
98 </el-radio-group>
99 )
100 }
101 },
102 {
103 prop: 'djyymb',
104 label: '登记原因模板',
105 render: (h, scope) => {
106 return (
107 <el-input placeholder="登记原因模板" value={scope.row[scope.column.property]}
108 onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
109 )
110 }
111 },
112 {
113 label: '是否启用模板',
114 width: '160',
115 render: (h, scope) => {
116 return (
117 <el-radio-group v-model={scope.row.sfqymb} onChange={(val) => { scope.row[scope.column.property] = val }}>
118 <el-radio label={1}>启用</el-radio>
119 <el-radio label={0}>禁用</el-radio>
120 </el-radio-group>
121 )
122 }
123 },
124 {
125 label: '移动',
126 width: '90',
127 render: (h, scope) => {
128 return (
129 <div>
130 <i class="el-icon-top pointer" disabled={scope.$index == 0} style="color:#409EFF" onClick={() => { this.moveUpward(scope.$index, scope.row) }}></i>
131 <i class="el-icon-bottom pointer" disabled={(scope.$index + 1) == this.tableData.length} style="color:#409EFF" onClick={() => { this.moveDown(scope.$index, scope.row) }}></i>
132 </div>
133 )
134 }
135 }
136 ],
137 tableData: [{
138 djqxmc: '',
139 djqxbm: '',
140 djyymb: '',
141 sfqymb: 1,
142 sfqy: 1
143 },
144 {
145 djqxmc: '',
146 djqxbm: '',
147 djyymb: '',
148 sfqymb: 0,
149 sfqy: 0
150 }]
151 }
152 },
153 watch: {
154 tableData: {
155 handler (newValue, oldValue) {
156 this.$emit('updateValue', newValue)
157 },
158 deep: true
159 }
160 },
161 methods: {
162 handleAdd () {
163 this.tableData.push(
164 {
165 djqxmc: '',
166 djqxbm: '',
167 djyymb: '',
168 sfqymb: 0,
169 sfqy: 0
170 }
171 )
172 },
173 handleMinus () { },
174 // 上移下移
175 moveUpward (index, row) {
176 upward(index, this.tableData)
177 this.key++
178 },
179 moveDown (index, row) {
180 down(index, this.tableData)
181 this.key++
182 },
183 }
184 }
185 </script>
186 <style scoped lang='scss'>
187 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 }}</li> 7 }}</li>
8 </ul> 8 </ul>
9 <div class="sqywgz-edit-right"> 9 <div class="sqywgz-edit-right">
10 <el-form :model="ruleForm" :rules="rules" label-width="135px" ref="ruleForm"> 10 <el-form :model="ruleForm" v-if="n == 0" :rules="rules" label-width="135px" ref="ruleForm">
11 <el-row> 11 <el-row>
12 <el-col :span="8"> 12 <el-col :span="8">
13 <el-form-item label="权利类型编码" prop="qllxbm"> 13 <el-form-item label="权利类型编码" prop="qllxbm">
...@@ -28,8 +28,6 @@ ...@@ -28,8 +28,6 @@
28 </el-form-item> 28 </el-form-item>
29 </el-col> 29 </el-col>
30 </el-row> 30 </el-row>
31
32
33 <el-row> 31 <el-row>
34 <el-col :span="8"> 32 <el-col :span="8">
35 <el-form-item label="登记类型编码" prop="djlxbm"> 33 <el-form-item label="登记类型编码" prop="djlxbm">
...@@ -50,7 +48,6 @@ ...@@ -50,7 +48,6 @@
50 </el-form-item> 48 </el-form-item>
51 </el-col> 49 </el-col>
52 </el-row> 50 </el-row>
53
54 <el-row> 51 <el-row>
55 <el-col :span="8"> 52 <el-col :span="8">
56 <el-form-item label="登记业务编码" prop="djywbm"> 53 <el-form-item label="登记业务编码" prop="djywbm">
...@@ -63,7 +60,6 @@ ...@@ -63,7 +60,6 @@
63 </el-form-item> 60 </el-form-item>
64 </el-col> 61 </el-col>
65 </el-row> 62 </el-row>
66
67 <el-row> 63 <el-row>
68 <el-col :span="8"> 64 <el-col :span="8">
69 <el-form-item label="是否启用" prop="sfqy"> 65 <el-form-item label="是否启用" prop="sfqy">
...@@ -79,7 +75,6 @@ ...@@ -79,7 +75,6 @@
79 </el-form-item> 75 </el-form-item>
80 </el-col> 76 </el-col>
81 </el-row> 77 </el-row>
82
83 <el-row> 78 <el-row>
84 <el-col :span="8"> 79 <el-col :span="8">
85 <el-form-item label="登记情形及材料" prop="djqxcl"> 80 <el-form-item label="登记情形及材料" prop="djqxcl">
...@@ -93,7 +88,6 @@ ...@@ -93,7 +88,6 @@
93 </el-upload> 88 </el-upload>
94 </el-col> 89 </el-col>
95 </el-row> 90 </el-row>
96
97 <el-row> 91 <el-row>
98 <el-col :span="8"> 92 <el-col :span="8">
99 <el-form-item label="登记原因设置" prop="djyysz"> 93 <el-form-item label="登记原因设置" prop="djyysz">
...@@ -113,6 +107,7 @@ ...@@ -113,6 +107,7 @@
113 </el-col> 107 </el-col>
114 </el-row> 108 </el-row>
115 </el-form> 109 </el-form>
110 <djqxsd v-else-if="n == 1" @updateValue="getValue" />
116 </div> 111 </div>
117 </div> 112 </div>
118 </dialogBox> 113 </dialogBox>
...@@ -120,7 +115,11 @@ ...@@ -120,7 +115,11 @@
120 115
121 <script> 116 <script>
122 import fileController from '@/api/fileController' 117 import fileController from '@/api/fileController'
118 import djqxsd from './djqxsd.vue'
123 export default { 119 export default {
120 components: {
121 djqxsd
122 },
124 props: { 123 props: {
125 value: { type: Boolean, default: false }, 124 value: { type: Boolean, default: false },
126 }, 125 },
...@@ -208,6 +207,9 @@ export default { ...@@ -208,6 +207,9 @@ export default {
208 }; 207 };
209 }, 208 },
210 methods: { 209 methods: {
210 getValue (val) {
211 console.log(val);
212 },
211 submitForm () { 213 submitForm () {
212 this.$refs['ruleForm'].validate(async (valid) => { 214 this.$refs['ruleForm'].validate(async (valid) => {
213 if (valid) { 215 if (valid) {
......