gxd-vue-library

{{if fileType=== 'js'}} {{if (item.setting.vuexFn || item.states.length > 0) && (item.isActions || item.isState ) }} import { {{if item.setting.vuexFn && item.isActions}} mapActions, {{/if}} {{if item.states.length > 0 && item.isState }} mapState, {{/if}} } from 'vuex'; {{/if}} import XdBaseField from "@/components/XdBaseField"; {{if item.setting.richText}} import XdTinymce from "@/components/XdTinymce"; {{/if}} {{if item.setting.remoteCascader}} import XdRemoteCascader from "@/components/XdRemoteCascader"; {{/if}} {{if item.setting.remoteInput}} import XdRemoteInput from "@/components/XdRemoteInput"; {{/if}} {{if item.setting.hasUpload}} import handleUpdate from "@/mixins/handleUpdate"; {{/if}} {{if item.setting.remoteCascader}} import handleCity from "@/mixins/handleCity"; {{/if}} /** * @description {{item.modeTitle}} - {{item.title}} * @author coder * @module @/pages/{{item.modelName}}/{{item.name}}.vue */ export default { name: "{{item.pageName}}", components: { XdBaseField, {{if item.setting.remoteInput}} XdRemoteInput, {{/if}} {{if item.setting.remoteCascader}} XdRemoteCascader, {{/if}} {{if item.setting.richText}} XdTinymce, {{/if}} }, mixins:[ {{if item.setting.hasUpload}} handleUpdate, {{/if}} {{if item.setting.remoteCascader}} handleCity {{/if}} ], {{if item.states.length > 0 && item.isState }} computed: { ...mapState('{{item.modelName}}', [ {{each item.states}} '{{$value}}', {{/each}} ]) }, {{/if}} data(){ return { /**提交信息**/ listForm: [], listValue: {}, /**自定义模块存储**/ customForm:{ {{if item.setting.richText}} tinymceContent: '', //内容编辑器 {{/if}} {{if item.setting.remoteInput}} remoteInput: [], //远程搜索选中操作 {{/if}} {{if item.setting.remoteCascader}} remoteCascader: null, //远程无限极选中操作 {{/if}} }, /**自定义模块验证规则**/ customRules: { {{if item.setting.richText}} tinymceContent:{ required: true, message: '请输入内容', trigger: ['change'] } {{/if}} }, /**初始化完成**/ status: false, } }, created(){ this.initForm() }, methods: { {{if item.setting.vuexFn}} ...mapActions('{{item.modelName}}', [ '{{item.setting.vuexFn}}' ]), {{/if}} /** * @description 自定义单独触发验证规则 * @param form 表单 * @param field 验证字段 */ handleCustomChange(form ,field ){ this.$refs[form].validateField(field) }, {{if item.setting.remoteInput}} /** * @description 搜索模块中远程搜索方法 * @param query 搜索关键字 * @param resolve 搜索回调方法 */ handleRemoteSearch(query, resolve) { //仅仅为试数据，需要实现 setTimeout(() => { let reslut = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]; reslut = reslut.map(item => { return {value: `value:${item}`, label: `label:${item}`}; }); let list = reslut.filter(item => { return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1; }); resolve(list) }, 500); }, {{/if}} /** * @description 初始化表单 * @param params */ initForm(...params) { this.listForm = [ /**区间输入组**/ { label: '卡号组:', //label tips: '注意:开始和结束卡号段必须填写，并且开始卡号必须小于结束开号.', ele: 'xd-range-group', //package 名称 keys: ['start_number', 'end_number'], //返回数组字段名称 defaultValue: [ //默认组值 {"start_number": 20, "end_number": 23}, {"start_number": 451202, "end_number": 4512300}, {"start_number": 1545512121, "end_number": 1545512123} ], valueKey: 'xd_range_group', //form[valueKey] placeholder: ['开始卡号', '结束卡号'], disabled: false, rules: [ { required: true, validator(rule, value, callback) { let flag = true, index=null, message= ''; value.map((item,idx)=>{ if(index === null) { //检查卡号填写为空 Object.keys(item).map(k => { if (item[k] === null) { index = idx; flag = false; message = '卡号输入不能为空！' } }); //检查开始卡号不能大于等于结束卡号 if(index === null) { if (item['start_number'] >= item['end_number']) { index = idx; flag = false; message = '输入开始卡号不能大于等于结束卡号' } } } }); if(flag) callback(); else callback(`第【${index + 1}】条数据有误，错误：${message}`); let temp = false; if (!value['week_day'] || value['week_day'].length === 0) temp = true; if (!value['week_start'] || !value['week_end']) temp = true; if (temp) callback('请设置规则') else callback(); }, trigger: ['blur', 'change'] }, ] }, /**选择礼拜日与时间插件**/ { label: '选择礼拜:', //label ele: 'xd-select-week-time', //package 名称 valueKey: {list: 'week_day', start: 'week_start', end: 'week_end'}, //form[valueKey] defaultValue: {list: [0, 1, 2], start: 1636128000000, end: 1638720000000}, //默认图片对象 disabled: false, list: [ {label: '日', value: 0}, {label: "一", value: 1}, {label: "二", value: 2}, {label: "三", value: 3}, {label: "四", value: 4}, {label: "五", value: 5}, {label: "六", value: 6} ], rules: [ { required: true, message: '请选择日期', validator(rule, value, callback) { let temp = false; if(!value['week_day'] || value['week_day'].length ===0) temp = true; if(!value['week_start'] || !value['week_end']) temp = true; if (temp) callback('请设置规则') else callback(); }, trigger: ['blur', 'change'] }, ] }, /**区间输入**/ { label: '卡号区间:', //label ele: 'xd-range', //package 名称 valueKey: ['start_card', 'end_card'], //form[valueKey] value: [200, 300], //v-model placeholder: ['开始卡号', '结束卡号'], width: 450, disabled: false, }, /**时间区间插件**/ { label: '活动时间:', //label ele: 'xd-date-range', //package 名称 valueKey: ['start_range_time', 'end_range_time'], //form[valueKey] value: [1636128000000, 1638720000000], //v-model timestamp=>必须时间戳毫秒 format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式 formatValue: 'timestamp', //输出时间格式 placeholder: ['活动开始时间', '活动结束时间'], disabled: false, rules: [ {required: true, message: '请选择日期', trigger: ['blur', 'change']}, ] }, /**XdOverAddPrice**/ { label: '超过:', //label ele: 'xd-over-add-price', //package 名称 valueKey: {min: 'price_min', list: 'price_type', value: 'price'}, //form[valueKey] defaultValue: {min: '', list: '', value: ''}, //默认图片对象 unit: '元', list: [ {label: "加价", value: "raise"}, {label: "下调", value: "reduce"}, {label: "固定值", value: "fixed"} ], disabled: false, rules: [ { required: true, validator(rule, value, callback) { let temp = false; Object.keys(value).map(key =>{ if(!value[key]) temp = true; }); if(temp) callback('请设置规则') else callback(); }, message: '请选择日期', trigger: 'change' } ] }, /**input**/ { label: '域名名称:', //label ele: 'el-input', //package 名称 //text，textarea 和其他原生 input 的 type 值 //https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types type: 'text', valueKey: 'domain_name', //form[valueKey] value: '', //v-model placeholder: '输入域名名称', classNmae: 'input40', //样式名称:input100,input80,input70,input60,input50,input40,input30,input20 disabled: false, rules: [ { required: true, type:'url', message:'请输入域名地址', trigger: 'blur' }, ] }, /**多选选择**/ { label: '选择模式:', //label ele: 'xd-check', //package 名称 valueKey: 'check_name', //form[valueKey] value: [4, 5], //v-model disabled: false, list: [ {"label": "万利达集团", "value": 4}, {"label": "中国联通", "value": 5}, {"label": "中国移动", "value": 6}, {"label": "味多美", "value": 7}, ], rules: [ {required: true, message: '请选择模式', trigger: ['blur', 'change']}, ] }, /**upload-one**/ { label: '图片上传:', //label ele: 'xd-upload', //package 名称 valueKey: 'upload', //form[valueKey] value: {}, //v-model defaultValue: null, //默认图片对象 slot: true, //按钮是否使用slot oneWidth: 100,//单个图片显示宽度 oneHeight: 100, //单个图片显示高度 elinputClassName: 'input40', tipsformet: '上传文件格式：@imageType@，不超过@size@MB.', type: ['jpg', 'png', 'jpeg'], styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传 uploadType: 'qiniu', //''=>API服务上传 qiniu=>七牛云OSS上传 aliyun=> 阿里云OSS上传 size: 5, //5M action: 'https://up-z1.qiniup.com', qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名 sort: true, //当上传图片列表时候，是否启用排序 maxlen: 100, //当上传图片列表时候，最大数量数量 rules: [ {required: true, message: '请上传图片', trigger: ['blur', 'change']}, ] }, /**upload-auth**/ { label: '证件上传:', //label ele: 'xd-upload', //package 名称 valueKey: 'upload_auth', //form[valueKey] value: '', //v-model defaultValue: [], //默认图片对象 slot: true, //按钮是否使用slot elinputClassName: 'input40', tipsformet: '上传文件格式：@imageType@，不超过@size@MB.', type: ['jpg', 'png', 'jpeg'], styleType: 'auth', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传 uploadType: 'qiniu', //''=>API服务上传 qiniu=>七牛云OSS上传 aliyun=> 阿里云OSS上传 size: 5, //5M action: 'https://up-z1.qiniup.com', qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名 sort: true, //当上传图片列表时候，是否启用排序 maxlen: 100, //当上传图片列表时候，最大数量数量 rules: [ {required: true, message: '请上传图片', trigger: ['blur', 'change']}, ] }, /**upload-auth**/ { label: '图片列表:', //label ele: 'xd-upload', //package 名称 valueKey: 'upload_list', //form[valueKey] value: '', //v-model defaultValue: [ { url: "http://static.e56buy.com/XdimdSPQr7QhSVoKJ4N9FuOTCumEbXdN", name: "1_1529482049654c8715a20-aafa-4a86-919e-9ec37af1eb3c.jpeg", uid: 1639020778679, hashKey: "XdimdSPQr7QhSVoKJ4N9FuOTCumEbXdN", } ], //默认图片对象 slot: true, //按钮是否使用slot elinputClassName: 'input40', tipsformet: '上传文件格式：@imageType@，不超过@size@MB.', type: ['jpg', 'png', 'jpeg'], styleType: 'list', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传 uploadType: 'qiniu', //''=>API服务上传 qiniu=>七牛云OSS上传 aliyun=> 阿里云OSS上传 size: 5, //5M action: 'https://up-z1.qiniup.com', qiniuCdn: 'http://static.e56buy.com', //七牛访问资源域名 sort: true, //当上传图片列表时候，是否启用排序 maxlen: 100, //当上传图片列表时候，最大数量数量 rules: [ {required: true, message: '请上传图片', trigger: ['blur', 'change']}, ] }, /**多选选择**/ { label: '项目分类:', //label ele: 'xd-select-list', //package 名称 valueKey: 'project_name', //form[valueKey] value: [4,5], //v-model placeholder: '请选择加盟商', multiple: true, //多选 disabled: false, list: [ {"label": "万利达集团", "value": 4}, {"label": "中国联通", "value": 5}, {"label": "中国移动", "value": 6}, {"label": "味多美", "value": 7}, ] }, /**单选选择**/ { label: '加盟商:', //label ele: 'xd-select-list', //package 名称 valueKey: 'product_type', //form[valueKey] value: 5, //v-model placeholder: '请选择加盟商', multiple: false, disabled: false, list: [ {"label": "万利达集团", "value": 4}, {"label": "中国联通", "value": 5}, {"label": "中国移动", "value": 6}, {"label": "味多美", "value": 7}, ] }, /**状态选择**/ { label: '状态:', //label ele: 'xd-select-status', //package 名称 valueKey: 'status', //form[valueKey] value: 'Y', //v-model isall: true, disabled: false, backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2] placeholder: '请选择', list: 'status', //status=>状态 best=>推荐 associate=>关联 yes=>是否 open=> 是否开启 check=>审核 }, /**状态(二选一)**/ { label: '状态(二选一):', //label ele: 'xd-radio-status', //package 名称 valueKey: 'radio_status', //form[valueKey] value: 'Y', //v-model isall: true, disabled: false, backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2] placeholder: '请选择', list: 'status', //status=>状态 best=>推荐 associate=>关联 yes=>是否 open=> 是否开启 check=>审核 }, /**单选列表**/ { label: '单选列表:', //label ele: 'xd-radio', //package 名称 valueKey: 'radio_status_list', //form[valueKey] value: 6, //v-model disabled: false, rules: [ {required: true, message: '请选择', trigger: ['blur', 'change']} ], list: [ {"label": "万利达集团", "value": 4}, {"label": "中国联通", "value": 5}, {"label": "中国移动", "value": 6}, {"label": "味多美", "value": 7}, ] }, /**Switch**/ { label: 'Switch:', //label ele: 'xd-switch', //package 名称 valueKey: 'switch_status_tips', //form[valueKey] value: 'Y', //v-model list: ['否', '是'], //左右文本 color: ['green', '#999'], //文本颜色 showTips: true, //是否显示文本 disabled: false, backValueType: 1, //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2] }, /**Switch**/ { label: 'Switch:', //label ele: 'xd-switch', //package 名称 valueKey: 'switch_status', //form[valueKey] value: 'Y', //v-model list: ['否', '是'], //左右文本 disabled: false, //color: ['green', '#999'], //文本颜色 showTips: false, //是否显示文本 backValueType: 1, //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2] }, /**插槽**/ { label: '', //label ele: 'slot', //package 名称 slot: 'custom', }, /**时间插件**/ { label: '开启时间:', //label ele: 'xd-date', //package 名称 valueKey: 'open_time', //form[valueKey] value: 1636128000000, //v-model timestamp=>必须时间戳毫秒 format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式 formatValue: 'timestamp', //输出时间格式 placeholder: '开启时间', disabled: false, rules: [ {required: true, message: '请输入时间', trigger: ['blur', 'change']} ] }, /**Transfer**/ { label: 'Transfer:', //label ele: 'xd-transfer', //package 名称 valueKey: 'transfer', //form[valueKey] value: [1,2,3], //v-model placeholder: '输入城市名称', title: ['Source', 'Target'], left: [], //左侧选中值 right: [], //右边选中值 list: null, //[] => 数组列表 null=>使用测试数据 rules: [ {required: true, message: '请选择穿越的值', trigger: ['blur', 'change']}, ] }, ]; this.status = true; }, /** * @description 提交自定义模块 */ subumit(){ return new Promise((resolve, reject) => { this.$refs['customForm'].validate((valid, error) => { if (valid) resolve(valid); else reject(valid, error); }) }); }, /** * @description 提交数据事件 */ handleClick() { Promise.all([this.$refs['poster'].submit(), this.subumit()]) .then(res => { console.log({...this.listValue, ...this.customForm}) }) .catch(res => { console.log('no') }) } } } {{else if fileType === 'html'}} <template> <el-card class="app-container"> <div class="app-container__title">{{item.title}}</div> <div class="app-container__body"> <xd-base-field ref="poster" v-if="status && listForm.length > 0" v-model="listValue" :list="listForm" label-width="100px" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" > {{if item.setting.isCustomSlot}} <template slot="custom" slot-scope="scope"> <el-form :label-width="scope.width" :model="customForm" :rules="customRules" ref="customForm" > {{if item.setting.isCustomSlot}} <el-form-item label="编辑器" prop="tinymceContent" > <xd-tinymce v-model="customForm.tinymceContent" :height="200" :image-config="getImageConfig()" @success="handleSuccess" @onApiSuccessUrl="handleApiSuccessUrl" @onGetParamsAndHeader="handleGetParamsAndHeader" @change="handleCustomChange('customForm', 'tinymceContent')" ></xd-tinymce> </el-form-item> {{/if}} <el-form-item label="远程搜索选中" prop="remoteInput" > <xd-remote-input style="width: 30%" v-model="customForm.remoteInput" :remote-search="handleRemoteSearch" ></xd-remote-input> </el-form-item> <el-form-item label="远程无限级" prop="remoteCascader" > <xd-remote-cascader v-model="customForm.remoteCascader" :remote-search="handleGetCityChildren" ></xd-remote-cascader> </el-form-item> </el-form> </template> {{/if}} </xd-base-field> <div class="adjust-btn"> <el-button @click="handleClick()" type="primary">提交</el-button> </div> </div> </el-card> </template> {{else if fileType === 'css'}} .app-container { &__title { font-size: 16px; line-height: 24px; padding: 0 0 20px; font-weight: bold; } &__body { & ::v-deep .el-tabs__content{ padding-top: 20px; } } } .adjust-btn { margin-left: 100px; } @media screen and (max-width: 768px) { .app-container { &__title { padding: 0 0 10px; } & ::v-deep .el-card__body { padding: 10px; } &__body { & ::v-deep .el-tabs__content { padding-top: 10px; } } } } {{/if}}