<template>
|
<el-table-column v-if="isShowField()" :sortable="!!col.sortable" :prop="col.prop" :label="col.label" :width="col.width || 'auto'" :header-align="col.headerAlign || 'left'" :align="col.align || 'left'" :filters="col.filters" :filter-method="col.filterMethod" :filtered-value="filteredValue" class-name="col-container">
|
<template slot-scope="{ row, column, $index }">
|
<!--通用列插槽-->
|
<slot :row="row" :col="col" :index="$index" name="column-slot">
|
<template v-if="!col.readonly && !disabled && col.type=='input' && row===currentRow">
|
<el-switch v-if="['byte'].indexOf(col.dataType)>=0" :ref="'switch-'+col.prop" v-model="row[col.prop]" :key="col.key" active-value="1" inactive-value="0" size="mini" @change="(val)=>{change($refs['switch-' + col.prop], val, row, col);}"></el-switch>
|
<el-input-number v-else-if="['int32', 'int64'].indexOf(col.dataType)>=0" :ref="'input-number-'+col.prop" v-model.number="row[col.prop]" :key="col.key" :style="{width:'100%'}" controls-position="right" size="mini" @change="(val)=>{change($refs['input-number-' + col.prop], val, row, col);}"></el-input-number>
|
<el-input v-else-if="['decimal', 'double', 'money'].indexOf(col.dataType)>=0" :ref="'input-'+col.prop" v-model="row[col.prop]" :key="col.key" :style="{width:'100%'}" :step="0.01" size="mini" type="number" @change="(val)=>{change($refs['input-' + col.prop], val, row, col);}"></el-input>
|
<el-input v-else :ref="'select-'+col.prop" v-model="row[col.prop]" :key="col.key" :style="{width:'100%'}" size="mini" @change="(val)=>{change($refs['input-' + col.prop], val, row, col);}"></el-input>
|
</template>
|
|
<el-cascader v-else-if="col.type=='cascader' && !col.readonly && !disabled && row===currentRow" :ref="'cascader-'+col.prop" v-model="row[col.prop]" :key="col.key" :options="col" :style="{width:'100%'}" size="mini" @change="(val)=>{change($refs['cascader-' + col.prop], val, row, col);}"></el-cascader>
|
|
<el-select v-else-if="!col.readonly && !disabled && col.type=='select' && row===currentRow" :ref="'select-'+col.prop" v-model="row[col.prop]" :key="col.key" :style="{width:'100%'}" :field="col" :filterable="!!col.filterable" class="select" size="mini" @change="(val)=>{change($refs['select-' + col.prop], val, row, col);}">
|
<el-option v-for="item in getOptions(col)" :key="item.id" v-bind="item" :label="item.label" :value="item.value" :option="item">
|
<template v-if="col.optionParams">
|
<template v-if="col.optionParams==='子标题模式'">
|
<div class="title">
|
{{ item[col.optionParams.title] }}
|
</div>
|
<div class="sub-title">
|
{{ item[col.optionParams.subTitle] }}
|
</div>
|
</template>
|
</template>
|
</el-option>
|
</el-select>
|
|
<!-- 表格选择框 -->
|
<template v-else-if="col.type === 'table-select' && !col.readonly && !disabled && row===currentRow">
|
<table-select v-model="row[col.prop]" :ref="'table-select-'+col.prop" :form-data="row" :field="col" :columns="col.options.columns" :label="col.label" :input-width="col.options.width" :placeholder="col.options.placeholder" @on-focus="(ref, val, event)=>{onFocus(ref, val, event, col);}" @on-item-click="(ref, val, itemData)=>{itemClick(ref, val, itemData, col);}" @on-change="(ref, val)=>{change(ref, val, col);}" @on-key-up="(ref, val, event, tableData)=>{onKeyup(ref, val, event, col, tableData);}" @on-row-change="(ref, selectedRow) => {onRowChange(ref, selectedRow, col);}">
|
</table-select>
|
</template>
|
|
<template v-else-if="!col.readonly && !disabled && col.type === 'time' && row===currentRow">
|
<el-time-picker :ref="'time-picker-'+col.prop" v-model="row[col.prop]" :key="col.key" :is-range="col.isRange" :placeholder="col.placeholder" :start-placeholder="col.startPlaceholder" :end-placeholder="col.endPlaceholder" :readonly="col.readonly" :disabled="col.disabled" :editable="col.editable" :clearable="col.clearable" :arrow-control="col.arrowControl" :style="{width: col.width}" size="mini" @change="(val)=>{change($refs['time-picker-' + col.prop], val, row, col);}">
|
</el-time-picker>
|
</template>
|
|
<template v-else-if="!col.readonly && !disabled && ['date', 'datetime'].indexOf(col.type)>=0 && row===currentRow">
|
<el-date-picker :ref="'date-picker-'+col.prop" v-model="row[col.prop]" :key="col.key" :type="col.type" :is-range="col.isRange" :placeholder="col.placeholder" :start-placeholder="col.startPlaceholder" :end-placeholder="col.endPlaceholder" :readonly="col.readonly" :disabled="col.disabled" :editable="col.editable" :clearable="col.clearable" :format="col.format" :value-format="col.format" class="w-100pc" size="mini" @change="(val)=>{change($refs['date-picker-' + col.prop], val, row, col);}">
|
</el-date-picker>
|
</template>
|
|
<template v-else>
|
<template v-if="col.prop==dataOptions.linkColumn">
|
<el-link type="primary" @click.native="()=>{linkEditor(row[dataOptions.idField]);}">{{ row[col.prop] }}</el-link>
|
</template>
|
<template v-else-if="col.dropdown_Id>0 || (col.options && col.options.dropdown_Id>0)">
|
{{ translateText(col.prop, row[col.prop], col.dropdown_Id || col.options.dropdown_Id) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['int32', 'int64', 'decimal', 'double', 'money'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter, true, col) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</template>
|
</template>
|
</slot>
|
</template>
|
</el-table-column>
|
</template>
|
|
<script>
|
import TreeSelect from "@/components/base/TreeSelect";
|
import TableSelect from "@/components/base/TableSelect";
|
|
export default {
|
name: "yrt-editor-input",
|
components: {
|
TreeSelect,
|
TableSelect
|
},
|
props: {
|
// 列数据对象
|
col: {
|
type: Object,
|
required: true,
|
default: () => {
|
return {};
|
}
|
},
|
// 数据参数
|
dataOptions: {
|
type: Object,
|
default: () => {}
|
},
|
// 下拉框值集合
|
dropdownData: {
|
type: Object,
|
default: () => {}
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
// 控制显示字段,true=显示所有字段，Array=只显示数组内的字段
|
showFields: {
|
type: [Boolean, Array],
|
default: true
|
},
|
// 自定义查询条件
|
filteredValue: {
|
type: Array,
|
default: () => {
|
return [];
|
}
|
},
|
// 当前行
|
currentRow: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
data() {
|
return {};
|
},
|
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) {
|
const dropdown_Id = field.options && field.options.dropdown_Id ? field.options.dropdown_Id : field.dropdown_Id;
|
if (dropdown_Id) {
|
field.options = the.dropdownData["dropdown" + dropdown_Id];
|
}
|
return field.options;
|
};
|
}
|
}
|
},
|
watch: {},
|
created() {
|
this.loadCascaderData();
|
},
|
mounted() {},
|
destroyed() {},
|
methods: {
|
// 是否显示字段
|
isShowField() {
|
let isShow = this.col.prop !== "_action" && !this.col.hidden;
|
if (!(this.showFields === true || (Array.isArray(this.showFields) && this.showFields.indexOf(this.col.prop) >= 0))) {
|
isShow = false;
|
}
|
|
return isShow;
|
},
|
// 字段change事件
|
change(ref, val, row, field) {
|
var the = this;
|
if (field.type === "select") {
|
// 设置表单数据，附加下拉框其他字段
|
var itemOption = ref.getOption(val).$attrs.option;
|
Object.keys(itemOption).forEach((key, index) => {
|
if (["value", "label"].indexOf(key) < 0) {
|
the.$set(row, key, itemOption[key]);
|
}
|
});
|
}
|
if (["decimal", "double"].indexOf(field.dataType) >= 0) {
|
row[field.prop] = Number(val);
|
}
|
this.$emit("on-detail-change", ref, val, row, field);
|
},
|
// 翻译下拉框值
|
translateText(prop, val, dropdown_Id) {
|
var ddList = this.dropdownData["dropdown" + dropdown_Id];
|
if (!ddList) return val;
|
var item = ddList.find((item, index, arr) => {
|
return item.value === val;
|
});
|
if (!item) return val;
|
return item.label;
|
},
|
// 树形下拉框获得点击项
|
onTreeNodeClick(data, node, el, 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]);
|
}
|
},
|
// 加载级联数据
|
loadCascaderData() {
|
var the = this;
|
this.$nextTick(() => {
|
Object.keys(this.$refs).forEach(refName => {
|
if (refName.indexOf("cascader") >= 0) {
|
var ref = the.$refs[refName];
|
var field = ref.$attrs["field"];
|
the.$emit("on-focus", ref, 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} And ParentId=0`;
|
} else {
|
where = `UserProduct_Id=${userInfo.UserProduct_Id} And 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
|
);
|
});
|
}
|
},
|
// input-select item click event
|
itemClick(ref, val, itemData, field) {
|
this.$emit("on-item-click", ref, val, itemData, field, this.formData);
|
},
|
// 获得焦点
|
onRowChange(ref, selectedRow, field) {
|
this.$emit("on-row-change", ref, selectedRow, 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);
|
}
|
}
|
};
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.col-container {
|
padding: 0px;
|
.select {
|
.title {
|
color: #333333;
|
padding: 5px 10px;
|
}
|
.sub-title {
|
color: #888888;
|
padding: 5px 10px;
|
}
|
}
|
}
|
</style>
|
