86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
|
|
<div class="yo-form-group">
|
|
<a-form-model-item label="应用名称" prop="name">
|
|
<a-input placeholder="请输入应用名称" v-model="form.name" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="唯一编码" prop="code">
|
|
<a-input placeholder="请输入唯一编码" v-model="form.code" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="图标" prop="icon">
|
|
<a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
|
|
<a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
|
|
<a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
|
|
</a-input>
|
|
</a-form-model-item>
|
|
<a-form-model-item prop="color">
|
|
<chrome-picker v-model="form.color" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="排序" prop="sort">
|
|
<a-input-number
|
|
:max="1000"
|
|
:min="0"
|
|
class="w-100-p"
|
|
placeholder="请输入排序"
|
|
v-model="form.sort"
|
|
/>
|
|
</a-form-model-item>
|
|
</div>
|
|
|
|
<yo-icon-selector ref="icon-selector" v-model="form.icon" />
|
|
</a-form-model>
|
|
</template>
|
|
<script>
|
|
import YoIconSelector from '@/components/yoIconSelector';
|
|
import { Chrome } from 'vue-color';
|
|
|
|
export default {
|
|
components: {
|
|
YoIconSelector,
|
|
ChromePicker: Chrome,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
color: '#fff',
|
|
active: false,
|
|
},
|
|
rules: {
|
|
name: [{ required: true, message: '请输入应用名称' }],
|
|
code: [{ required: true, message: '请输入唯一编码' }],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* 必要的方法
|
|
* 在打开编辑页时允许填充数据
|
|
*/
|
|
onFillData(record) {
|
|
this.form = this.$_.cloneDeep(record);
|
|
},
|
|
|
|
/**
|
|
* 必要的方法
|
|
* 在外部窗口进行保存时调用表单验证
|
|
*/
|
|
onValidate(callback) {
|
|
this.$refs.form.validate(callback);
|
|
},
|
|
|
|
/**
|
|
* 必要的方法
|
|
* 在外部窗口关闭或重置时对表单验证进行初始化
|
|
*/
|
|
onResetFields() {
|
|
setTimeout(() => {
|
|
this.$refs.form.resetFields();
|
|
}, 300);
|
|
},
|
|
|
|
onOpenSelectIcon() {
|
|
this.$refs['icon-selector'].onOpen(this.form.icon);
|
|
},
|
|
},
|
|
};
|
|
</script> |