6 changed files with 415 additions and 214 deletions
-
3src/assets/styles/variables.scss
-
88src/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