6 changed files with 415 additions and 214 deletions
-
3src/assets/styles/variables.scss
-
86src/assets/styles/yxk-admin.scss
-
4src/views/category/descriptionPreview/form.json
-
296src/views/category/descriptionPreview/index.vue
-
135src/views/category/descriptionPreview/module/PreviewForm.vue
-
103src/views/category/descriptionPreview/module/SettingForm.vue
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<div class="preview-content des-form"> |
||||
|
<el-row :gutter="4"> |
||||
|
<el-form ref="addOrUpdateForm" :model="addOrUpdateForm" label-width="100px"> |
||||
|
<draggable v-bind="{draggable:'.dragg-item',animation:500}" :disabled="!isDisabled" @update="datadragEnd"> |
||||
|
<el-col v-for="(item,index) in formPreviewData" :key="index" class="dragg-item" :span="item.isFullRow ? 24 : 12"> |
||||
|
<el-form-item :label="item.fieldCnName" :prop="item.fieldName"> |
||||
|
<!-- select --> |
||||
|
<el-select v-if="item.isInputClass === 'select'" v-model="addOrUpdateForm[item.fieldName]" placeholder="" :style="{ width: item.isDisplayWidth+'px'}" :disabled="isDisabled"> |
||||
|
<el-option label="区域二" value="beijing" /> |
||||
|
</el-select> |
||||
|
<!-- text --> |
||||
|
<el-input v-if="item.isInputClass === 'text'" v-model="addOrUpdateForm[item.fieldName]" :style="{ width: item.isDisplayWidth+'px'}" :disabled="isDisabled" /> |
||||
|
<!-- number --> |
||||
|
<el-input v-if="item.isInputClass === 'number'" v-model="addOrUpdateForm[item.fieldName]" type="number" :style="{ width: item.isDisplayWidth+'px'}" :disabled="isDisabled" /> |
||||
|
<!-- date --> |
||||
|
<el-date-picker |
||||
|
v-if="item.isInputClass === 'date'" |
||||
|
v-model="addOrUpdateForm[item.fieldName]" |
||||
|
type="date" |
||||
|
align="right" |
||||
|
format="yyyy-MM-dd" |
||||
|
placeholder="" |
||||
|
:clearable="false" |
||||
|
:style="{ width: item.isDisplayWidth+'px'}" |
||||
|
:disabled="isDisabled" |
||||
|
/> |
||||
|
<!-- popover --> |
||||
|
<el-input v-if="item.isInputClass === 'popover'" v-model="addOrUpdateForm[item.fieldName]" class="input-popover" :style="{ width: item.isDisplayWidth+'px'}" :disabled="isDisabled"> |
||||
|
<i slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" /> |
||||
|
</el-input> |
||||
|
<!-- textarea --> |
||||
|
<el-input v-if="item.isInputClass === 'textarea'" v-model="addOrUpdateForm[item.fieldName]" type="textarea" rows="3" :style="{ width: item.isDisplayWidth+'px'}" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</draggable> |
||||
|
</el-form> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import formData from '../form.json' |
||||
|
import draggable from 'vuedraggable' |
||||
|
export default { |
||||
|
name: 'PreviewForm', |
||||
|
components: { draggable }, |
||||
|
props: { |
||||
|
isDisabled: { |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formPreviewData: [], |
||||
|
rules: {}, |
||||
|
addOrUpdateForm: {} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.formPreviewData = formData |
||||
|
this.editrow() |
||||
|
}, |
||||
|
methods: { |
||||
|
editrow(row) { |
||||
|
this.rules = {} |
||||
|
this.formPreviewData.map(x => { |
||||
|
this.rules[x.prop] = [{ required: true, message: '请输入' + x.label, trigger: 'blur' }] |
||||
|
}) |
||||
|
this.addOrUpdateForm = Object.assign({}, row) |
||||
|
}, |
||||
|
datadragEnd(evt) { |
||||
|
evt.preventDefault() |
||||
|
console.log('拖动前的索引 :' + evt.oldIndex) |
||||
|
console.log('拖动后的索引 :' + evt.newIndex) |
||||
|
// console.log(this.colors)// 拖拽排序后会改变原先数据索引(排序) |
||||
|
// console.log('获取拖拽改变数据索引后，拖动前的索引的元素 :' + |
||||
|
// this.colors[evt.oldIndex]) |
||||
|
// console.log('获取拖拽改变数据索引后，被拖拽的元素 :' + |
||||
|
// this.colors[evt.newIndex]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.preview-content{ |
||||
|
width: 630px !important; |
||||
|
min-height: calc(100vh - 312px); |
||||
|
padding: 20px 15px 20px 0 !important; |
||||
|
margin-top: 0 !important; |
||||
|
border-radius: 4px; |
||||
|
background-color: #02255F; |
||||
|
::v-deep .el-input__inner{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
::v-deep .el-textarea__inner{ |
||||
|
width: 100%; |
||||
|
color: #3A99FD; |
||||
|
background: #021941; |
||||
|
border: none; |
||||
|
&::placeholder{ |
||||
|
color: #3A99FD !important; |
||||
|
} |
||||
|
&::-webkit-input-placeholder{ |
||||
|
color: #3A99FD !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-input__prefix{ |
||||
|
text-align: right; |
||||
|
right: 5px !important; |
||||
|
} |
||||
|
.input-popover { |
||||
|
::v-deep .el-input__suffix{ |
||||
|
right: 10px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-date-editor{ |
||||
|
.el-input__inner{ |
||||
|
padding-left: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 去除element ui 中el-input type=“number“的上下箭头 |
||||
|
::v-deep input::-webkit-outer-spin-button, |
||||
|
::v-deep input::-webkit-inner-spin-button { |
||||
|
-webkit-appearance: none !important; |
||||
|
} |
||||
|
::v-deep input[type='number'] { |
||||
|
-moz-appearance: textfield !important; |
||||
|
} |
||||
|
.dragg-item{ |
||||
|
cursor: move; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<div class="des-form"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="75px"> |
||||
|
<el-col :span="15"> |
||||
|
<el-form-item label="字段类型" prop="fieldCnName"> |
||||
|
<el-select v-model="form.isDataType" placeholder="" :disabled="isDisabled"> |
||||
|
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> --> |
||||
|
<el-option label="区域二" value="beijing" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="字段长度" prop="fieldName"> |
||||
|
<el-input v-model="form.fieldName" placeholder="" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="著录形式" prop="isDataType"> |
||||
|
<el-select v-model="form.isDataType" placeholder="" :disabled="isDisabled"> |
||||
|
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> --> |
||||
|
<el-option label="区域二" value="beijing" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="对应字典" prop="isColumnLength"> |
||||
|
<el-select v-model="form.isDataType" placeholder="" :disabled="isDisabled"> |
||||
|
<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> --> |
||||
|
<el-option label="区域二" value="beijing" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="显示长度" prop="isDefaultValue"> |
||||
|
<el-input v-model="form.isDefaultValue" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="默认值" prop="isDefaultValue"> |
||||
|
<el-input v-model="form.isDefaultValue" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>自动补零</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="9"> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>显示一整行</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>输入字段</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>必填字段</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>自动生成</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>自动加一</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="checkbox-item"> |
||||
|
<span>值不重复</span> |
||||
|
<el-checkbox v-model="form.type" label="" name="type" :disabled="isDisabled" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="input-num" label="位数" prop="num"> |
||||
|
<el-input v-model="form.num" :disabled="isDisabled" /> |
||||
|
<span>位</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-form> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'SettingForm', |
||||
|
components: {}, |
||||
|
props: { |
||||
|
isDisabled: { |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: {}, |
||||
|
rules: {} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.des-form{ |
||||
|
width: 496px; |
||||
|
padding: 20px 38px 20px 20px; |
||||
|
margin-top: 30px; |
||||
|
border-radius: 4px; |
||||
|
background-color: #02255F; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue