<template>
|
<el-form-item v-if="!hideFeilds.find(item=>item==field.options.prop)" :prop="field.options.prop" :readonly="field.options.readonly" :required="field.options.required" :rules="changeRules(field)" :label-width="field.options['label-width']!=null?field.options['label-width']+'px':null" :class="{'no-margin':field.options.noMargin}" class="input-container">
|
<template slot="label">
|
<slot :name="'label-' + field.options.prop">
|
{{ (field.options.noLabel?null:field.label) }}
|
</slot>
|
</template>
|
<!--单行分组-->
|
<template v-if="field.type=='inline-group'">
|
<template v-for="subField in field.fields">
|
<el-input v-if="subField.type=='input'" :ref="'input-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" v-bind="subField.options" :style="{width:subField.options.width}" class="inline-input" @blur="(event)=>{onBlur($refs['input-' + subField.options.prop][0], formData[subField.options.prop], event, subField)}" @focus="(event)=>{onFocus($refs['input-' + subField.options.prop][0], formData[subField.options.prop], event, subField)}"></el-input>
|
|
<el-cascader v-else-if="subField.type=='cascader'" :key="subField.key" v-model="formData[subField.options.prop]" :options="subField.options" :style="{width:subField.options.width}" class="inline-input" change-on-select @focus="(event)=>{onFocus($refs['cascader-' + subField.options.prop][0], formData[subField.options.prop], event, subField);}" @change="(val)=>{change($refs['cascader-' + subField.options.prop], val, event, subField);}"></el-cascader>
|
|
<!--下拉框选择器-->
|
<template v-else-if="subField.type=='select'">
|
<el-select v-if="subField.options.keyProp" :ref="'select-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.keyProp]" :style="{width:subField.options.width}" :field="subField" :disabled="subField.options.disabled" :multiple="subField.options.multiple" :filterable="!!subField.options.filterable" class="inline-input" @change="(val)=>{change($refs['select-' + subField.options.prop][0], val, subField);}">
|
<el-option v-for="item in getOptions(subField)" :key="item.id" v-bind="item" :label="item.label" :value="item.value" :option="item">
|
</el-option>
|
</el-select>
|
<el-select v-else :ref="'select-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" :style="{width:subField.options.width}" :field="subField" :disabled="subField.options.disabled" :multiple="subField.options.multiple" :filterable="!!subField.options.filterable" class="inline-input" @change="(val)=>{change($refs['select-' + subField.options.prop][0], val, subField);}">
|
<el-option v-for="item in getOptions(subField)" :key="item.id" v-bind="item" :label="item.label" :value="item.value" :option="item">
|
</el-option>
|
</el-select>
|
</template>
|
|
<template v-else-if="subField.type === 'time'">
|
<el-time-picker :key="subField.key" v-model="formData[subField.options.prop]" :is-range="subField.options.isRange" :placeholder="subField.options.placeholder" :start-placeholder="subField.options.startPlaceholder" :end-placeholder="subField.options.endPlaceholder" :readonly="subField.options.readonly" :disabled="subField.options.disabled" :editable="subField.options.editable" :clearable="subField.options.clearable" :arrow-control="subField.options.arrowControl" :style="{width: subField.options.width}">
|
</el-time-picker>
|
</template>
|
|
<template v-else-if="subField.type === 'date'">
|
<el-date-picker :key="subField.key" v-model="formData[subField.options.prop]" :type="subField.options.type" :is-range="subField.options.isRange" :placeholder="subField.options.placeholder" :start-placeholder="subField.options.startPlaceholder" :end-placeholder="subField.options.endPlaceholder" :readonly="subField.options.readonly" :disabled="subField.options.disabled" :editable="subField.options.editable" :clearable="subField.options.clearable" :format="subField.options.format" :value-format="subField.options.format" :style="{width: subField.options.width}">
|
</el-date-picker>
|
</template>
|
|
<!-- 单选组 -->
|
<el-radio-group v-else-if="subField.type=='radio'" :key="subField.key" v-model="formData[subField.options.prop]" :style="{display: subField.options.inline ? 'inline-block' : 'block'}" class="margin-right-10">
|
<!-- 静态数据 -->
|
<template v-if="subField.options.remote === false">
|
<el-radio v-for="(item, optionIndex) in subField.options.options" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-radio>
|
</template>
|
<!-- 远程动态函数 -->
|
<template v-else-if="subField.options.remote === true">
|
</template>
|
<!-- 下拉框绑定 -->
|
<template v-else-if="subField.options.remote === 'bindDropdown'">
|
<el-radio v-for="(item, optionIndex) in getOptions(subField)" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-radio>
|
</template>
|
</el-radio-group>
|
|
<!-- 复选组 -->
|
<el-checkbox-group v-else-if="subField.type=='checkbox'" :ref="'checkbox-' + subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" @change="(val)=>{change($refs['checkbox-' + subField.options.prop], val, subField);}">
|
<!-- 静态数据 -->
|
<template v-if="subField.options.remote === false">
|
<el-checkbox v-for="(item, optionIndex) in subField.options.options" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
|
</template>
|
<!-- 远程动态函数 -->
|
<template v-else-if="subField.options.remote === true">
|
</template>
|
<!-- 下拉框绑定 -->
|
<template v-else-if="subField.options.remote === 'bindDropdown'">
|
<el-checkbox v-for="(item, optionIndex) in getOptions(subField)" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
|
</template>
|
</el-checkbox-group>
|
|
<!--空白-->
|
<template v-else-if="subField.type=='blank'">
|
<slot :name="'blank-' + subField.options.prop" :formData="formData"></slot>
|
</template>
|
</template>
|
</template>
|
<!--独立行-->
|
<template v-else>
|
<template v-if="'input,textarea'.indexOf(field.type)>=0">
|
<el-input v-if="['int','int32', 'int64'].indexOf(field.options.dataType)>=0" :ref="'input-'+field.options.prop" v-model.number="formData[field.options.prop]" v-bind="field.options" :type="field.type" :style="{width: field.options.width||'auto'}" clearable @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}"></el-input>
|
<el-input v-else-if="['decimal'].indexOf(field.options.dataType)>=0" :ref="'input-'+field.options.prop" v-model="formData[field.options.prop]" v-bind="field.options" :style="{width: field.options.width||'auto'}" type="number" @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}" @keyup.native="(event)=>{onKeyup($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}"></el-input>
|
<el-input v-else :ref="'input-'+field.options.prop" v-model="formData[field.options.prop]" v-bind="field.options" :type="field.type" :style="{width: field.options.width||'auto'}" clearable @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}"></el-input>
|
</template>
|
<!--下拉框选择器-->
|
<template v-else-if="field.type=='select'">
|
<!--有关联主键字段-->
|
<el-select v-if="field.options.keyProp" :ref="'select-'+field.options.prop" :key="field.key" v-model="formData[field.options.keyProp]" :style="{width:field.options.width}" :field="field" :disabled="field.options.disabled" :multiple="field.options.multiple" :filterable="!!field.options.filterable" :remote="field.options.remote===true" :remote-method="(query)=>{remoteMethod($refs['select-' + field.options.prop], query, field)}" reserve-keyword class="inline-input" @click.native="selectClick(field)" @change="(val)=>{change($refs['select-' + field.options.prop], val, field);}">
|
<el-option v-for="item in getOptions(field)" :key="item.id" v-bind="item" :label="item.label" :value="item.value" :option="item">
|
</el-option>
|
</el-select>
|
<!--无关联主键字段-->
|
<el-select v-else :ref="'select-'+field.options.prop" :key="field.key" v-model="formData[field.options.prop]" :style="{width:field.options.width}" :field="field" :disabled="field.options.disabled" :multiple="field.options.multiple" :filterable="!!field.options.filterable" :remote="field.options.remote===true" :remote-method="(query)=>{remoteMethod(query, field)}" reserve-keyword class="inline-input" @change="(val)=>{change($refs['select-' + field.options.prop], val, field);}">
|
<el-option v-for="item in getOptions(field)" :key="item.id" v-bind="item" :label="item.label" :value="item.value" :option="item">
|
</el-option>
|
</el-select>
|
</template>
|
|
<!-- 级联 -->
|
<el-cascader v-else-if="field.type=='cascader'" :ref="'cascader-' + field.options.prop" v-model="formData[field.options.prop]" :options="field.options.options" :placeholder="field.options.placeholder" :style="{width: field.options.width}" :rules="field.rules" :field="field" filterable change-on-select @focus="(event)=>{onFocus($refs['cascader-' + field.options.prop][0], formData[field.options.prop], event, field);}" @change="(val)=>{change($refs['cascader-' + field.options.prop], val, field);}"></el-cascader>
|
|
<!-- 单选组 -->
|
<el-radio-group v-else-if="field.type=='radio'" :ref="'radio-' + field.options.prop" :key="field.key" v-model="formData[field.options.prop]" @change="(val)=>{change($refs['radio-' + field.options.prop], val, field);}">
|
<!-- 静态数据 -->
|
<template v-if="field.options.remote === false">
|
<el-radio v-for="(item, optionIndex) in field.options.options" :key="field.key + '_ops_' + optionIndex" :value="item.value" :label="item.label" :style="{display: (field.options.inline ? 'inline-block' : 'block'),'margin-bottom':(field.options.inline?0:'15px')}">{{ item.label }}</el-radio>
|
</template>
|
<!-- 远程动态函数 -->
|
<template v-else-if="field.options.remote === true">
|
</template>
|
<!-- 下拉框绑定 -->
|
<template v-else-if="field.options.remote === 'bindDropdown'">
|
<el-radio v-for="(item, optionIndex) in getOptions(field)" :key="field.key + '_ops_' + optionIndex" :value="item.value" :label="item.label" :style="{display: field.options.inline ? 'inline-block' : 'block'}">{{ item.label }}</el-radio>
|
</template>
|
</el-radio-group>
|
|
<!-- 复选组 -->
|
<el-checkbox-group v-else-if="field.type=='checkbox'" :ref="'checkbox-' + field.options.prop" :key="field.key" v-model="formData[field.options.prop]" @change="(val)=>{change($refs['checkbox-' + field.options.prop], val, field);}">
|
<!-- 静态数据 -->
|
<template v-if="field.options.remote === false">
|
<el-checkbox v-for="(item, optionIndex) in field.options.options" :key="field.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
|
</template>
|
<!-- 远程动态函数 -->
|
<template v-else-if="field.options.remote === true">
|
</template>
|
<!-- 下拉框绑定 -->
|
<template v-else-if="field.options.remote === 'bindDropdown'">
|
<el-checkbox v-for="(item, optionIndex) in getOptions(field)" :key="field.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
|
</template>
|
</el-checkbox-group>
|
<!-- 开关 -->
|
<el-switch v-else-if="field.type=='switch'" :ref="'radio-' + field.options.prop" :key="field.key" v-model.number="formData[field.options.prop]" v-bind="field.options">
|
</el-switch>
|
|
<!-- 树选择框 -->
|
<template v-else-if="field.type === 'tree'">
|
<tree-select v-model="formData[field.options.prop]" :options="field.options" :label="field.label" :tree-load="(node, resolve)=>{treeLoad(node, resolve, field)}" :disabled="currentDisabled" :node-key-value="getNodeKeyValue(field)" @onFocus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-change="(ref, val)=>{change(ref, val, field);}" @on-tree-node-click="(data, node, el, labels, values)=>{onTreeNodeClick(data, node, el, labels, values, field)}">
|
</tree-select>
|
</template>
|
|
<!-- 输入选择框 -->
|
<template v-else-if="field.type === 'input-select'">
|
<input-select v-model="formData[field.options.prop]" :options="getInputSelectOptions(field).options" :label="field.label" :disabled="currentDisabled || getInputSelectOptions(field).disabled" :input-width="getInputSelectOptions(field).width" :placeholder="getInputSelectOptions(field).placeholder" @on-focus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-item-click="(ref, val, itemData)=>{itemClick(ref, val, itemData, field);}" @on-change="(ref, val)=>{change(ref, val, field);}">
|
</input-select>
|
</template>
|
|
<!-- 表格选择框 -->
|
<template v-else-if="field.type === 'table-select'">
|
<table-select v-model="formData[field.options.prop]" :form-data="formData" :field="field" :columns="field.options.columns" :label="field.label" :disabled="currentDisabled || field.options.disabled" :input-width="field.options.width" :placeholder="field.options.placeholder" @on-focus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-item-click="(ref, val, itemData)=>{itemClick(ref, val, itemData, field);}" @on-change="(ref, val)=>{change(ref, val, field);}" @on-key-up="(ref, val, event, tableData)=>{onKeyup(ref, val, event, field, tableData);}" @on-row-change="(ref, selectedRow) => {onRowChange(ref, selectedRow, field);}">
|
</table-select>
|
</template>
|
|
<template v-else-if="field.type === 'time'">
|
<el-time-select v-if="field.options.fixedTimeSelect" v-model="formData[field.options.prop]" :placeholder="field.options.placeholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :style="{width: field.options.width}" :picker-options="{start:field.options.start, end:field.options.end, step:field.options.step}">
|
</el-time-select>
|
<el-time-picker v-else v-model="formData[field.options.prop]" :is-range="field.options.isRange" :placeholder="field.options.placeholder" :start-placeholder="field.options.startPlaceholder" :end-placeholder="field.options.endPlaceholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :arrow-control="field.options.arrowControl" :style="{width: field.options.width}">
|
</el-time-picker>
|
</template>
|
|
<template v-else-if="['date', 'datetime'].indexOf(field.type)>=0">
|
<el-date-picker :ref="'date-' + field.options.prop" v-model="formData[field.options.prop]" :type="field.options.type" :is-range="field.options.isRange" :placeholder="field.options.placeholder" :start-placeholder="field.options.startPlaceholder" :end-placeholder="field.options.endPlaceholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :format="field.options.format" :value-format="field.options.format" :style="{width: field.options.width}" @change="(val)=>{change($refs['date-' + field.options.prop], val, field);}">
|
</el-date-picker>
|
</template>
|
|
<!--上传图片-->
|
<template v-else-if="field.type=='upload-image'">
|
<el-upload ref="upload" :http-request="uploadHttp" :before-upload="(file)=>beforeAvatarUpload(file, field)" :multiple="field.options.multiple" :on-preview="(file)=>handlePicPreview(file, field)" :on-remove="handlePicRemove" :disabled="field.options.disabled" :on-change="(file, fileList)=>{handlePicChange(file, fileList)}" :file-list="picList" :list-type="field.options.listType" :class="{'hide-button': field.options.readonly}" action="">
|
<i v-if="field.options.listType=='picture-card'" class="el-icon-plus"></i>
|
<el-button v-else size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
|
<!--预览图片-->
|
<el-dialog :visible.sync="dialogPicVisible" :append-to-body="true">
|
<img :src="dialogImageUrl" width="100%" alt="">
|
</el-dialog>
|
</template>
|
|
<!--空白-->
|
<template v-if="field.type=='blank'">
|
<slot :name="'blank-' + field.options.prop"></slot>
|
</template>
|
|
<!--富文本编辑器-->
|
<template v-else-if="field.type === 'tinymce-editor'">
|
<tinymce ref="tinymce" v-model="formData[field.options.prop]" :height="field.options.size.height" />
|
</template>
|
|
<!--静态文本-->
|
<template v-if="field.type=='static'">
|
<div :style="{'padding-top':'8px','font-size':field.options.styles.fontSize+'px', 'line-height':field.options.styles.lineHeight+'px'}">
|
{{ formData[field.options.prop] }}
|
</div>
|
</template>
|
</template>
|
</el-form-item>
|
</template>
|
|
<script>
|
import Tinymce from "@/components/Tinymce";
|
import TreeSelect from "@/components/base/TreeSelect";
|
import InputSelect from "@/components/base/InputSelect";
|
import TableSelect from "@/components/base/TableSelect";
|
|
export default {
|
name: "yrt-editor-input",
|
components: {
|
Tinymce,
|
TreeSelect,
|
InputSelect,
|
TableSelect
|
},
|
props: {
|
// 字段数据
|
field: {
|
type: Object,
|
required: true
|
},
|
// 校验规则
|
formData: {
|
type: Object,
|
required: true
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
required: true
|
},
|
// 下拉框值集合
|
dropdownData: {
|
type: Object,
|
required: true
|
},
|
// 校验规则
|
rules: {
|
type: Object,
|
default: () => {
|
return null;
|
}
|
},
|
// 隐藏字段
|
hideFeilds: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
}
|
},
|
data() {
|
return {
|
dialogImageUrl: null,
|
dialogPicVisible: false,
|
BASE_API: process.env.BASE_API
|
};
|
},
|
|
computed: {
|
// 是否禁用
|
currentDisabled: {
|
get: function() {
|
return this.disabled;
|
},
|
set: function(newValue) {
|
this.$emit("update:disabled", newValue); // 双向绑定prop.action，通知父级组件变量值同步更新
|
}
|
},
|
// 获得下拉框options
|
getOptions: {
|
get: function() {
|
var the = this;
|
return function(field) {
|
if (field.options.remote === "bindDropdown") {
|
field.options.options = the.dropdownData["dropdown" + field.options.dropdown_Id];
|
} else if (field.options.remote === true) {
|
this.appendOptions(field);
|
}
|
return field.options.options;
|
};
|
}
|
},
|
// 获得输入选择框options
|
getInputSelectOptions: {
|
get: function() {
|
var the = this;
|
return function(field) {
|
if (field.options.remote === "bindDropdown") {
|
field.options.options = the.dropdownData["dropdown" + field.options.dropdown_Id];
|
}
|
return field.options;
|
};
|
}
|
},
|
// 图片列表
|
picList: {
|
get: function() {
|
var values = this.formData[this.field.options.prop];
|
if (!values) return [];
|
var valueList = this.common.showImages(values);
|
|
return valueList.map(item => {
|
const f = item.src.split("/");
|
const name = decodeURI(f[f.length - 1]);
|
return {
|
name: name,
|
url: item.src
|
};
|
});
|
},
|
set: function(val) {
|
this.formData[this.field.options.prop] = JSON.stringify(
|
val.map(item => {
|
return {
|
src: item.url
|
};
|
})
|
);
|
}
|
}
|
},
|
watch: {
|
formData: {
|
handler: function() {
|
if (this.$refs.tinymce) {
|
if (this.formData) {
|
const val = this.formData[this.field.options.prop];
|
this.$refs.tinymce.setContent(val || "");
|
}
|
}
|
},
|
deep: true
|
}
|
},
|
created() {
|
this.loadCascaderData();
|
},
|
mounted() {},
|
destroyed() {},
|
methods: {
|
// 初始化
|
init() {
|
if (this.$refs.tinymce) {
|
this.$refs.tinymce.initTinymce();
|
}
|
},
|
// 字段change事件
|
change(ref, val, field) {
|
if (["decimal"].indexOf(field.options.dataType) >= 0) {
|
this.formData[field.options.prop] = Number(val);
|
}
|
if (field.type === "select") {
|
const itemOptions = this.getOptions(field);
|
let prop = field.options.prop;
|
const keyProp = field.options.keyProp;
|
// 设置表单数据
|
if (Array.isArray(val)) {
|
const names = [];
|
for (let index = 0; index < val.length; index++) {
|
const item = val[index];
|
if (prop.charAt(prop.length - 1) === "s") {
|
prop = prop.substr(0, prop.length - 1);
|
}
|
const itemOption = itemOptions.find(option => option[keyProp] === item);
|
const v = itemOption[prop] || itemOption.value;
|
names.push(v);
|
}
|
this.formData[field.options.prop] = names;
|
} else {
|
const itemOption = itemOptions.find(option => option[prop] === val || option.value === val);
|
Object.keys(itemOption).forEach((key, index) => {
|
if (["value", "label"].indexOf(key) < 0) {
|
this.$set(this.formData, key, itemOption[key]);
|
}
|
});
|
}
|
} else if (field.type === "checkbox") {
|
// this.$set(this.formData, key, itemOption[key]);
|
}
|
this.$emit("on-change", ref, val, field, this.formData);
|
},
|
// input-select item click event
|
itemClick(ref, val, itemData, field) {
|
this.$emit("on-item-click", ref, val, itemData, field, this.formData);
|
},
|
// 树形下拉框获得点击项
|
onTreeNodeClick(data, node, el, labels, values, field) {
|
var the = this;
|
// 仅选择叶节点
|
if (!node.isLeaf && field.options.onlySelectLeaf) return;
|
|
var key = field.options.prop;
|
// 将下拉框中的值赋给表单
|
if (Object.keys(data).findIndex(item => item === key) >= 0) {
|
Object.keys(data).forEach((key, index) => {
|
if (["value", "label", "hasChild", "hasFactChild", "state", "attributes"].indexOf(key) < 0) {
|
the.$set(the.formData, key, data[key]);
|
}
|
});
|
} else {
|
the.$set(the.formData, key, data[key]);
|
}
|
this.$emit("on-tree-node-click", data, node, el, labels, values, field);
|
},
|
// 加载级联数据
|
loadCascaderData() {
|
this.$nextTick(() => {
|
Object.keys(this.$refs).forEach(refName => {
|
if (refName.indexOf("cascader") >= 0) {
|
var ref = this.$refs[refName];
|
var field = ref.$attrs["field"];
|
this.$emit("on-focus", ref, this.formData[field.options.prop], null, field);
|
}
|
});
|
});
|
},
|
// 树形输入框load
|
treeLoad(node, resolve, subField) {
|
var the = this;
|
this.$emit("tree-load", node, resolve, subField);
|
// 默认加载数据
|
if (!subField.isLoaded) {
|
var keyName = subField.ajaxParams.keyName;
|
if (!keyName) {
|
the.$message.error("未设置tree下拉框ajax加载参数！");
|
return;
|
}
|
the.$nextTick(() => {
|
var where = "";
|
var userInfo = this.common.getUserInfo();
|
if (node.level === 0) {
|
where = {
|
userProduct_Id: userInfo.userProduct_Id,
|
parentId: 0
|
};
|
} else {
|
where = {
|
userProduct_Id: userInfo.userProduct_Id,
|
parentId: node.data[subField.ajaxParams.keyName]
|
};
|
}
|
|
var url = "/api/common/loadTreeNode";
|
var params = subField.ajaxParams;
|
params.where = where;
|
the.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
resolve(res.data);
|
} else {
|
the.$message.error(res.msg);
|
}
|
},
|
true
|
);
|
});
|
}
|
},
|
// tree当前Key Value
|
getNodeKeyValue(field) {
|
if (field.options.keyProp) {
|
return this.formData[field.options.keyProp];
|
} else {
|
return this.formData[field.options.prop];
|
}
|
},
|
// 图片删除
|
handlePicRemove(file, fileList) {
|
var urlList = fileList.map(item => {
|
return {
|
src: item.url
|
};
|
});
|
this.formData[this.field.options.prop] = JSON.stringify(urlList);
|
},
|
// 预览图片
|
handlePicPreview(file, field) {
|
if (field.options.listType === "text") {
|
window.open(file.url);
|
} else {
|
this.dialogImageUrl = file.url;
|
this.dialogPicVisible = true;
|
}
|
},
|
// 上传图片change事件
|
handlePicChange(file, fileList) {
|
var status = "success";
|
fileList.forEach(item => {
|
if (item.status === "ready") {
|
status = item.status;
|
}
|
});
|
if (status === "ready") return;
|
|
var urlList = fileList.map(item => {
|
var url = item.response ? item.response.Data.Url : item.url;
|
url = url.replace(this.BASE_API, "");
|
return url;
|
});
|
this.formData[this.field.options.prop] = urlList.join(",");
|
},
|
// 失去焦点事件
|
onBlur(ref, val, event, field) {
|
this.$emit("on-blur", ref, val, event, field);
|
},
|
// 获得焦点
|
onFocus(ref, val, event, field) {
|
this.$emit("on-focus", ref, val, event, field);
|
},
|
// 按键抬起
|
onKeyup(ref, val, event, field, tableData) {
|
// if (["decimal"].indexOf(field.options.dataType) >= 0) {
|
// this.formData[field.options.prop] = Number(val);
|
// }
|
this.$emit("on-key-up", ref, val, event, field, tableData);
|
},
|
// 获得焦点
|
onRowChange(ref, selectedRow, field) {
|
this.$emit("on-row-change", ref, selectedRow, field);
|
},
|
// 转换验证规则
|
changeRules(field) {
|
if (this.rules && this.rules[field.options.prop]) {
|
return this.rules[field.options.prop];
|
}
|
return field.rules;
|
},
|
// 阿里云图片上传
|
uploadHttp(up) {
|
debugger;
|
const file = this.$refs.upload.uploadFiles[0];
|
// 定义唯一的文件名
|
const name = up.file.name;
|
const formData = new FormData();
|
const headerConfig = {
|
headers: {
|
"Content-Type": "multipart/form-data"
|
}
|
};
|
if (!file) {
|
// 若未选择文件
|
alert("请选择文件");
|
return;
|
}
|
formData.append("file", file.raw);
|
formData.append("name", this.name);
|
const url = this.common.domain + "/api/common/uploadSingleFile";
|
this.$http.post(url, formData, headerConfig).then(res => {
|
res = res.data;
|
this.common.showMsg(res);
|
if (res.result) {
|
const list = this.picList;
|
const url = `/api/common/download?url=${res.data.url}`;
|
list.push({
|
name: name,
|
url: url
|
});
|
this.picList = list;
|
}
|
});
|
},
|
/**
|
* 图片限制
|
*/
|
beforeAvatarUpload(file, field) {
|
if (!field.options.multiple) {
|
if (this.picList.length >= 1) {
|
this.$message.error("已存在文件，请先删除然后重新上传");
|
return false;
|
}
|
}
|
if (field.options.listType === "text") {
|
const names = file.name.split(".");
|
const extName = names[names.length - 1];
|
const isLt5MB = file.size / 1024 / 1024 < 5;
|
const type = ["xls", "xlsx", "doc", "docx", "pdf"];
|
if (type.indexOf(extName) < 0) {
|
this.$message.error("只能上传xls/xlsx/doc/docx/pdf格式文档!");
|
}
|
if (!isLt5MB) {
|
this.$message.error("大小不能超过 5MB!");
|
}
|
return type.indexOf(extName) >= 0 && isLt5MB;
|
} else {
|
const names = file.name.split(".");
|
const extName = names[names.length - 1];
|
const isLt5MB = file.size / 1024 / 1024 < 5;
|
const type = ["jpeg", "jpg", "png"];
|
if (type.indexOf(extName) < 0) {
|
this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
|
}
|
if (!isLt5MB) {
|
this.$message.error("单张图片大小不能超过 5MB!");
|
}
|
return type.indexOf(extName) >= 0 && isLt5MB;
|
}
|
},
|
// 下拉框远程访问
|
remoteMethod(ref, query, field) {
|
const url = field.options.remoteFunc;
|
const params = {
|
query: query
|
};
|
this.common.ajax(url, params, res => {
|
if (res.result) {
|
field.options.options = res.data;
|
this.appendOptions(field);
|
this.$nextTick(() => {
|
ref.setSelected(); // 刷新条目
|
});
|
}
|
});
|
},
|
// 下拉框单击事件
|
selectClick(field) {
|
if (field.options.options && !field.options.options.length) {
|
this.remoteMethod("", field);
|
}
|
},
|
// 下拉框追加已选择项
|
appendOptions(field) {
|
// 下拉框绑定
|
if (field.options.options && field.options.keyProp) {
|
const keys = this.formData[field.options.keyProp];
|
const labels = this.formData[field.options.prop];
|
if (Array.isArray(keys) && Array.isArray(labels)) {
|
for (let index = 0; index < keys.length; index++) {
|
if (field.options.options.find(item => item[field.options.keyProp] === keys[index])) {
|
continue;
|
}
|
const item = {};
|
item[field.options.keyProp] = keys[index];
|
item[field.options.prop] = labels[index];
|
item.value = keys[index];
|
item.label = labels[index];
|
field.options.options.push(item);
|
}
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.input-container {
|
.inline-input {
|
& + .inline-input {
|
margin-left: 10px;
|
}
|
}
|
|
div.el-input:not(.no-bg) {
|
::v-deep input.el-input__inner[readonly] {
|
background-color: #f5f7fa;
|
cursor: not-allowed;
|
}
|
}
|
::v-deep .el-select,
|
::v-deep .el-cascader {
|
width: 100%;
|
input.el-input__inner[readonly] {
|
background-color: white;
|
cursor: pointer;
|
}
|
}
|
::v-deep .el-upload--picture-card {
|
margin-bottom: 10px;
|
}
|
::v-deep .el-upload-list__item {
|
-webkit-transition: all 0s cubic-bezier(0.55, 0, 0.1, 1);
|
transition: all 0s cubic-bezier(0.55, 0, 0.1, 1);
|
width: auto;
|
height: auto;
|
max-width: 348px;
|
min-width: 60px;
|
max-height: 148px;
|
}
|
.hide-button {
|
::v-deep .el-upload--text {
|
display: none;
|
}
|
::v-deep .el-upload-list__item-status-label {
|
display: none;
|
}
|
::v-deep .el-upload-list__item:hover .el-icon-close {
|
display: none;
|
}
|
}
|
}
|
</style>
|
