style
Showing
3 changed files
with
48 additions
and
26 deletions
| ... | @@ -233,23 +233,19 @@ const tableBtnClick = (scope, btn) => { | ... | @@ -233,23 +233,19 @@ const tableBtnClick = (scope, btn) => { |
| 233 | } else if (type == 'save') { | 233 | } else if (type == 'save') { |
| 234 | saveData(scope) | 234 | saveData(scope) |
| 235 | } else if (type == 'cancel') { | 235 | } else if (type == 'cancel') { |
| 236 | console.log('cancel') | ||
| 237 | if (row.guid != undefined) { | 236 | if (row.guid != undefined) { |
| 238 | // row = orginData.value[(page.value.curr - 1) * page.value.limit + scope.$index] | 237 | // row = orginData.value[(page.value.curr - 1) * page.value.limit + scope.$index] |
| 239 | row = JSON.parse(JSON.stringify(orginData.value[scope.$index])) | 238 | row = JSON.parse(JSON.stringify(orginData.value[scope.$index])) |
| 240 | row.STATE = '' | 239 | row.STATE = '' |
| 241 | row.STATUS = '' | 240 | row.STATUS = '' |
| 242 | tableData.value[scope.$index] = row | 241 | tableData.value[scope.$index] = row |
| 243 | console.log('1111') | ||
| 244 | } else { | 242 | } else { |
| 245 | tableData.value.splice(scope.$index, 1) | 243 | tableData.value.splice(scope.$index, 1) |
| 246 | orginData.value.splice(scope.$index, 1) | 244 | orginData.value.splice(scope.$index, 1) |
| 247 | console.log('2222') | ||
| 248 | } | 245 | } |
| 249 | tableInfo.value.page.rows = tableData.value.length | 246 | // tableInfo.value.page.rows = tableData.value.length |
| 250 | let haveState = tableData.value.some(item => item.STATE) | 247 | let haveState = tableData.value.some(item => item.STATE) |
| 251 | saveDisabled.value = !haveState | 248 | saveDisabled.value = !haveState |
| 252 | console.log('3333') | ||
| 253 | } else if (type == 'remove') { | 249 | } else if (type == 'remove') { |
| 254 | open("是否确定删除所选数据?", "warning"); | 250 | open("是否确定删除所选数据?", "warning"); |
| 255 | } | 251 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <el-dialog v-model="visible" :title="title" width="900" modal-class="standard-modal"> | 2 | <el-drawer |
| 3 | v-model="visible" | ||
| 4 | :title="title" | ||
| 5 | size="760px" | ||
| 6 | class="standard-modal" | ||
| 7 | :close-on-click-modal="false" | ||
| 8 | > | ||
| 3 | <el-form :rules="formRules" :model="form" ref="formEl" require-asterisk-position="right"> | 9 | <el-form :rules="formRules" :model="form" ref="formEl" require-asterisk-position="right"> |
| 4 | <el-row> | 10 | <el-row> |
| 5 | <el-col :span="12" style="padding-right:10px"> | 11 | <el-col :span="12" style="padding-right:10px"> |
| ... | @@ -75,28 +81,37 @@ | ... | @@ -75,28 +81,37 @@ |
| 75 | </el-select> | 81 | </el-select> |
| 76 | </div> | 82 | </div> |
| 77 | <div class="table-form-item"> | 83 | <div class="table-form-item"> |
| 78 | <el-select v-if="item.inputTypeCode == 2" v-model="item.dataTypeCode" style="width:220px" size="small" filterable clearable> | 84 | <el-select v-if="item.inputTypeCode == 2" v-model="item.dataTypeCode" style="width:160px" size="small" filterable clearable> |
| 79 | <el-option v-for="item in allDictOptions" :label="item.dictTypeName" :value="item.dictTypeName" :key="item.guid"></el-option> | 85 | <el-option v-for="item in allDictOptions" :label="item.dictTypeName" :value="item.dictTypeName" :key="item.guid"></el-option> |
| 80 | </el-select> | 86 | </el-select> |
| 81 | <el-input v-else-if="item.inputTypeCode == 3" v-model="item.validateExpression" placeholder="请输入"></el-input> | 87 | <el-input v-else-if="item.inputTypeCode == 3" v-model="item.validateExpression" placeholder="请输入"></el-input> |
| 82 | </div> | 88 | </div> |
| 83 | <div class="table-form-operation"> | 89 | <div class="table-form-operation"> |
| 84 | <el-icon color="#4fa1a4" @click="() => addTableItem(index)"> | 90 | <!-- <el-icon color="#4fa1a4" @click="() => addTableItem(index)"> |
| 85 | <CirclePlus /> | 91 | <CirclePlus /> |
| 86 | </el-icon> | 92 | </el-icon> --> |
| 87 | <el-icon color="#F56C6C" @click="() => deleteTableItem(index)"><Delete /></el-icon> | 93 | <el-icon color="#b2b2b2" @click="() => deleteTableItem(index)"><Delete /></el-icon> |
| 88 | </div> | 94 | </div> |
| 89 | </div> | 95 | </div> |
| 96 | <div class="table-form-add"> | ||
| 97 | <el-icon color="#4fa1a4" @click="() => addTableItem(index)"> | ||
| 98 | <CirclePlus /> | ||
| 99 | </el-icon> | ||
| 100 | <span @click="() => addTableItem(index)" style="cursor: pointer;">添加字段</span> | ||
| 101 | </div> | ||
| 90 | </div> | 102 | </div> |
| 91 | </el-form-item> | 103 | </el-form-item> |
| 92 | </el-col> | 104 | </el-col> |
| 93 | </el-row> | 105 | </el-row> |
| 94 | </el-form> | 106 | </el-form> |
| 95 | <template #footer> | 107 | <template #footer> |
| 96 | <el-button @click="visible = false" :disabled="confirmLoading">取消</el-button> | 108 | <div style="text-align:right"> |
| 97 | <el-button type="primary" @click="confirm" :loading="confirmLoading">确认</el-button> | 109 | <el-button @click="visible = false" :disabled="confirmLoading">取消</el-button> |
| 110 | <el-button type="primary" @click="confirm" :loading="confirmLoading">确认</el-button> | ||
| 111 | </div> | ||
| 98 | </template> | 112 | </template> |
| 99 | </el-dialog> | 113 | |
| 114 | </el-drawer> | ||
| 100 | </template> | 115 | </template> |
| 101 | 116 | ||
| 102 | <script setup lang="ts"> | 117 | <script setup lang="ts"> |
| ... | @@ -135,7 +150,7 @@ const visible = computed({ | ... | @@ -135,7 +150,7 @@ const visible = computed({ |
| 135 | } | 150 | } |
| 136 | }) | 151 | }) |
| 137 | const title = computed(() => { | 152 | const title = computed(() => { |
| 138 | return props.type === 'add' ? '新建元标准' : '编辑元标准' | 153 | return props.type === 'add' ? '新增元数据标准' : '编辑元数据标准' |
| 139 | }) | 154 | }) |
| 140 | 155 | ||
| 141 | /** | 156 | /** |
| ... | @@ -195,7 +210,8 @@ const tableFormTpl = { | ... | @@ -195,7 +210,8 @@ const tableFormTpl = { |
| 195 | } | 210 | } |
| 196 | function addTableItem (index) { | 211 | function addTableItem (index) { |
| 197 | const tableObj = { ...tableFormTpl } | 212 | const tableObj = { ...tableFormTpl } |
| 198 | form.value.fieldRQVOS.splice(index + 1, 0, tableObj) | 213 | // form.value.fieldRQVOS.splice(index + 1, 0, tableObj) |
| 214 | form.value.fieldRQVOS.push(tableObj) | ||
| 199 | } | 215 | } |
| 200 | function deleteTableItem (index) { | 216 | function deleteTableItem (index) { |
| 201 | form.value.fieldRQVOS.splice(index, 1) | 217 | form.value.fieldRQVOS.splice(index, 1) |
| ... | @@ -295,8 +311,9 @@ onBeforeMount(() => { | ... | @@ -295,8 +311,9 @@ onBeforeMount(() => { |
| 295 | justify-content: flex-start; | 311 | justify-content: flex-start; |
| 296 | } | 312 | } |
| 297 | } | 313 | } |
| 298 | .el-dialog__footer { | 314 | .el-drawer__footer { |
| 299 | padding: 10px; | 315 | padding: 10px; |
| 316 | justify-content: flex-end; | ||
| 300 | } | 317 | } |
| 301 | .el-dialog__body { | 318 | .el-dialog__body { |
| 302 | height: 500px; | 319 | height: 500px; |
| ... | @@ -309,9 +326,14 @@ onBeforeMount(() => { | ... | @@ -309,9 +326,14 @@ onBeforeMount(() => { |
| 309 | padding-right: 10px; | 326 | padding-right: 10px; |
| 310 | } | 327 | } |
| 311 | .table-form-operation { | 328 | .table-form-operation { |
| 312 | flex: 0 0 70px; | 329 | flex: 0 0 30px; |
| 313 | padding-left: 6px; | 330 | // padding-left: 6px; |
| 314 | } | 331 | } |
| 315 | } | 332 | } |
| 333 | .table-form-add { | ||
| 334 | display: flex; | ||
| 335 | align-items: center; | ||
| 336 | color: #4fa1a4; | ||
| 337 | } | ||
| 316 | } | 338 | } |
| 317 | </style> | 339 | </style> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <el-dialog | 2 | <el-drawer |
| 3 | v-model="visible" | 3 | v-model="visible" |
| 4 | :title="title" | 4 | :title="title" |
| 5 | width="600" | 5 | width="520" |
| 6 | modal-class="standard-modal" | 6 | class="standard-meta-modal" |
| 7 | :close-on-click-modal="false" | ||
| 7 | > | 8 | > |
| 8 | <el-form :model="form" :rules="formRules" ref="formEl" style="min-height: 200px;" require-asterisk-position="right"> | 9 | <el-form :model="form" :rules="formRules" ref="formEl" style="min-height: 200px;" require-asterisk-position="right"> |
| 9 | <el-row> | 10 | <el-row> |
| ... | @@ -36,10 +37,12 @@ | ... | @@ -36,10 +37,12 @@ |
| 36 | </el-row> | 37 | </el-row> |
| 37 | </el-form> | 38 | </el-form> |
| 38 | <template #footer> | 39 | <template #footer> |
| 39 | <el-button @click="visible = false" :disabled="confirmLoading">取消</el-button> | 40 | <div style="text-align:right"> |
| 40 | <el-button type="primary" @click="confirm" :loading="confirmLoading">确认</el-button> | 41 | <el-button @click="visible = false" :disabled="confirmLoading">取消</el-button> |
| 42 | <el-button type="primary" @click="confirm" :loading="confirmLoading">确认</el-button> | ||
| 43 | </div> | ||
| 41 | </template> | 44 | </template> |
| 42 | </el-dialog> | 45 | </el-drawer> |
| 43 | </template> | 46 | </template> |
| 44 | 47 | ||
| 45 | <script setup lang="ts"> | 48 | <script setup lang="ts"> |
| ... | @@ -197,15 +200,16 @@ onBeforeMount(() => { | ... | @@ -197,15 +200,16 @@ onBeforeMount(() => { |
| 197 | </script> | 200 | </script> |
| 198 | 201 | ||
| 199 | <style lang="scss"> | 202 | <style lang="scss"> |
| 200 | .standard-modal { | 203 | .standard-meta-modal { |
| 201 | .el-form-item { | 204 | .el-form-item { |
| 202 | flex-direction: column; | 205 | flex-direction: column; |
| 203 | .el-form-item__label { | 206 | .el-form-item__label { |
| 204 | justify-content: flex-start; | 207 | justify-content: flex-start; |
| 205 | } | 208 | } |
| 206 | } | 209 | } |
| 207 | .el-dialog__footer { | 210 | .el-drawer__footer { |
| 208 | padding: 10px; | 211 | padding: 10px; |
| 212 | justify-content: flex-end; | ||
| 209 | } | 213 | } |
| 210 | 214 | ||
| 211 | .table-form-wrapper { | 215 | .table-form-wrapper { | ... | ... |
-
Please register or sign in to post a comment