<template>
|
<div v-if="show" class="widget-config">
|
<el-form :label-position="'top'">
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="标题" required>
|
<el-input v-model="data.label"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="绑定字段" required>
|
<el-input v-model="data.prop"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="数据类型" required>
|
<el-select v-model="data.dataType" placeholder="请选择数据类型">
|
<el-option v-for="item in dataTypeList" :key="item.ID" :label="item.label" :value="item.ID">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="列宽度">
|
<el-input v-model.number="data.width">
|
<template slot="append">px</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="15">
|
<el-col :span="12">
|
<el-form-item label="最小列宽度">
|
<el-input v-model.number="data.minWidth">
|
<template slot="append">px</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="扩展字段">
|
<el-switch v-model="data.isExpandField">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="是否显示" required>
|
<el-switch v-model="data.hidden" :active-value="false" :inactive-value="true" active-text="显示" inactive-text="隐藏">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开启排序" required>
|
<el-switch v-model="data.sortable" :active-value="true" :inactive-value="false" active-text="开启" inactive-text="关闭">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="只读">
|
<el-switch v-model="data.readonly" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="查询输入框类型">
|
<el-select v-model="data.type" placeholder="请选择" @change="($event)=>{dataTypeChange($event, data);}">
|
<el-option :key="-1" label="none" value="none">
|
</el-option>
|
<el-option v-for="(item, index) in basicComponents" :key="index" :label="item.label" :value="item.type">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="data.type==='tree'" :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="仅选择叶节点">
|
<el-switch v-model="data.onlySelectLeaf">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="下拉框主键字段">
|
<el-input v-model="data.keyProp"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item v-if="data.type=='tree'" label="ajax请求参数">
|
<el-input v-model="currentAjaxParams" :rows="3" type="textarea"></el-input>
|
</el-form-item>
|
|
<el-row v-if="data.type==='select'" :gutter="20">
|
<!-- <el-col :span="12">
|
<el-form-item label="查询关联下拉框">
|
<el-input v-model.number="data.dropdown_Id"></el-input>
|
</el-form-item>
|
</el-col> -->
|
<el-col :span="12">
|
<el-form-item label="下拉框主键字段">
|
<el-input v-model="data.keyProp"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<template v-if="['select', 'radio', 'check'].indexOf(data.type)>=0">
|
<el-form-item v-if="data.options && Object.keys(data.options).indexOf('inline')>=0" label="布局方式">
|
<el-radio-group v-model="data.options.inline">
|
<el-radio-button :label="false">块级</el-radio-button>
|
<el-radio-button :label="true">行内</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item v-if="data.options && Object.keys(data.options).indexOf('options')>=0" label="下拉框选项">
|
<el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
|
<el-radio-button :label="'bindDropdown'">下拉框ID</el-radio-button>
|
<el-radio-button :label="false">静态数据</el-radio-button>
|
<el-radio-button :label="true">远端数据</el-radio-button>
|
</el-radio-group>
|
<template v-if="data.options.remote===true">
|
<div>
|
<el-input v-model="data.options.remoteFunc" size="mini" style="">
|
<template slot="prepend">远端方法</template>
|
</el-input>
|
<el-input v-model="data.options.props.value" size="mini" style="">
|
<template slot="prepend">值</template>
|
</el-input>
|
<el-input v-model="data.options.props.label" size="mini" style="">
|
<template slot="prepend">标签</template>
|
</el-input>
|
</div>
|
</template>
|
<template v-else-if="data.options.remote==='bindDropdown'">
|
<el-input v-model.number="data.options.dropdown_Id" type="number" size="mini">
|
<template slot="prepend">关联下拉框ID</template>
|
</el-input>
|
</template>
|
<template v-else>
|
<template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
|
<el-radio-group v-model="data.options.defaultValue">
|
<draggable :list="data.options.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
|
<li v-for="(item, index) in data.options.options" :key="index">
|
<el-radio :label="item.value" style="margin-right: 5px;">
|
<el-input v-model="item.value" style="width:90px;" size="mini"></el-input>
|
<el-input v-model="item.label" style="width:90px;" size="mini"></el-input>
|
<!-- <input v-model="item.value"/> -->
|
</el-radio>
|
<i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
|
<el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>
|
</li>
|
</draggable>
|
</el-radio-group>
|
</template>
|
|
<template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
|
<el-checkbox-group v-model="data.options.defaultValue">
|
|
<draggable :list="data.options.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
|
<li v-for="(item, index) in data.options.options" :key="index">
|
<el-checkbox :label="item.value" style="margin-right: 5px;">
|
<el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '190px' }" size="mini"></el-input>
|
<el-input v-if="data.options.showLabel" v-model="item.label" style="width:100px;" size="mini"></el-input>
|
</el-checkbox>
|
<i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
|
<el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>
|
|
</li>
|
</draggable>
|
</el-checkbox-group>
|
</template>
|
<div style="margin-left: 22px;">
|
<el-button type="text" @click="handleAddOption">添加选项</el-button>
|
</div>
|
</template>
|
|
</el-form-item>
|
|
<el-form-item label="自定义下拉框参数">
|
<el-input v-model="selectAjaxParams" :rows="3" type="textarea"></el-input>
|
</el-form-item>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item v-if="data.options && Object.keys(data.options).indexOf('showLabel')>=0" label="是否显示标签">
|
<el-switch v-model="data.options.showLabel">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item v-if="data.type=='tree'" label="仅选择叶节点">
|
<el-switch v-model="data.options.onlySelectLeaf">
|
</el-switch>
|
</el-form-item>
|
<el-form-item v-if="data.options && data.type=='select'" label="可搜索">
|
<el-switch v-model="data.options.filterable">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="快速查询字段" required>
|
<el-switch v-model="data.isQuickSearch" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="查询顺序(大于0显示)">
|
<el-input v-model.number="data.searchRowNo"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col v-if="data.type==='select'" :span="12">
|
<el-form-item label="下拉框可多选">
|
<el-switch v-model="data.multiple" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
<el-col v-if="data.type==='select'" :span="12">
|
<el-form-item label="下拉框可筛选">
|
<el-switch v-model="data.filterable" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="data.type==='table-select'">
|
<el-col :span="24">
|
<el-form-item label="接口地址">
|
<el-input v-model="data.options.url"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="data.type==='table-select'">
|
<el-col :span="24">
|
<el-form-item label="查询字段">
|
<el-input v-model="data.options.searchFields" :rows="2" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="data.type==='table-select'">
|
<el-col :span="24">
|
<el-form-item label="表格字段定义">
|
<el-row v-for="(item, index) in data.options.columns" :key="index">
|
<el-col :span="11">
|
<el-input v-model="item.prop" placeholder="字段英文名" class="col-param"></el-input>
|
</el-col>
|
<el-col :span="8">
|
<el-input v-model="item.label" placeholder="字段中文名" class="col-param"></el-input>
|
</el-col>
|
<el-col :span="5">
|
<el-input v-model.number="item.width" placeholder="宽度" class="col-param"></el-input>
|
</el-col>
|
</el-row>
|
<el-button type="text" @click="(e)=>{data.options.columns.push({})}">添加字段</el-button>
|
<el-button type="text" @click="(e)=>{data.options.columns.pop()}">删除字段</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="表头对齐方式">
|
<el-select v-model="data.headerAlign" placeholder="请选择">
|
<el-option label="left" value="left"></el-option>
|
<el-option label="center" value="center"></el-option>
|
<el-option label="right" value="right"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单元对齐方式">
|
<el-select v-model="data.align" placeholder="请选择">
|
<el-option label="left" value="left"></el-option>
|
<el-option label="center" value="center"></el-option>
|
<el-option label="right" value="right"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="12">
|
<el-form-item label="格式化">
|
<el-select v-model="data.formatter">
|
<el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
|
<el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
|
<el-option label="￥#.00" value="￥#.00"></el-option>
|
<el-option label="#" value="#"></el-option>
|
<el-option label="#.#" value="#.#"></el-option>
|
<el-option label="#.##" value="#.##"></el-option>
|
<el-option label="#.###" value="#.###"></el-option>
|
<el-option label="#.####" value="#.####"></el-option>
|
<el-option label="#.0" value="#.0"></el-option>
|
<el-option label="#.00" value="#.00"></el-option>
|
<el-option label="#.000" value="#.000"></el-option>
|
<el-option label="#.0000" value="#.0000"></el-option>
|
<el-option label="%" value="%"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="是否求和">
|
<el-switch v-model="data.isSum" active-text="是" inactive-text="否">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="3">
|
<el-col :span="24">
|
<el-form-item label="字段说明" required>
|
<el-input v-model="data.remark" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import Draggable from "vuedraggable";
|
const _dataTypeList = [
|
{ ID: "none", Name: "none" },
|
{ ID: "string", Name: "string" },
|
{ ID: "int16", Name: "int16" },
|
{ ID: "int32", Name: "int32" },
|
{ ID: "int64", Name: "int64" },
|
{ ID: "boolean", Name: "boolean" },
|
{ ID: "datetime", Name: "datetime" },
|
{ ID: "date", Name: "date" },
|
{ ID: "decimal", Name: "decimal" },
|
{ ID: "double", Name: "double" },
|
{ ID: "single", Name: "single" },
|
{ ID: "byte", Name: "byte" },
|
{ ID: "guid", Name: "guid" },
|
{ ID: "object", Name: "object" },
|
{ ID: "month", Name: "month" }
|
];
|
|
export default {
|
components: {
|
Draggable
|
},
|
props: {
|
data: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
basicComponents: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
// 验证规则
|
validator: {
|
type: null,
|
required: null,
|
pattern: null,
|
range: null,
|
length: null
|
},
|
// 数据类型列表
|
dataTypeList: _dataTypeList
|
};
|
},
|
computed: {
|
show() {
|
if (this.data && Object.keys(this.data).length > 0) {
|
return true;
|
}
|
return false;
|
},
|
// tree Ajax加载属性
|
currentAjaxParams: {
|
get: function() {
|
var params = this.data.ajaxParams;
|
if (params) {
|
return JSON.stringify(params, 0, 2);
|
} else {
|
return "";
|
}
|
},
|
set: function(val) {
|
try {
|
this.$set(this.data, "ajaxParams", JSON.parse(val));
|
this.$message.success("json格式正确");
|
} catch (error) {
|
this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
|
}
|
}
|
},
|
// select自定下拉框参数
|
selectAjaxParams: {
|
get: function() {
|
var params = this.data.optionParams;
|
if (params) {
|
return JSON.stringify(params, 0, 2);
|
} else {
|
return "";
|
}
|
},
|
set: function(val) {
|
try {
|
this.$set(this.data, "optionParams", JSON.parse(val));
|
this.$message.success("json格式正确");
|
} catch (error) {
|
this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
|
}
|
}
|
}
|
},
|
watch: {
|
"data.type"(val) {
|
if (val === "select") {
|
// 默认值设置
|
switch (this.data.prop) {
|
case "consignorName":
|
this.data.dropdown_Id = 797;
|
this.data.keyProp = "consignor_Id";
|
break;
|
case "enable":
|
this.data.dropdown_Id = 20;
|
break;
|
case "auditing":
|
this.data.dropdown_Id = 21;
|
break;
|
case "userTrueName":
|
this.data.dropdown_Id = 22;
|
this.data.keyProp = "user_Id";
|
break;
|
case "deptName":
|
this.data.dropdown_Id = 23;
|
this.data.keyProp = "dept_Id";
|
break;
|
case "roleName":
|
this.data.dropdown_Id = 24;
|
this.data.keyProp = "role_Id";
|
break;
|
case "storageName":
|
this.data.dropdown_Id = 31;
|
this.data.keyProp = "storage_Id";
|
break;
|
case "providerShortName":
|
this.data.dropdown_Id = 33;
|
this.data.keyProp = "provider_Id";
|
break;
|
case "productName":
|
this.data.dropdown_Id = 34;
|
this.data.keyProp = "product_Id";
|
break;
|
case "brandName":
|
this.data.dropdown_Id = 909;
|
this.data.keyProp = "brand_Id";
|
break;
|
case "typeName":
|
this.data.dropdown_Id = 531;
|
this.data.keyProp = "type_Id";
|
break;
|
case "sortingStatus":
|
this.data.dropdown_Id = 518;
|
break;
|
}
|
}
|
}
|
},
|
methods: {
|
// 编辑框类型改变
|
dataTypeChange(selectVal, data) {
|
const item = this.basicComponents.find(item => {
|
return item.type === selectVal;
|
});
|
const customJson = {};
|
// 表格下拉框时设置默认参数
|
// if (item.type === "table-select") {
|
// // 仓库默认值
|
// if (data.options.prop === "storageName") {
|
// customJson = {
|
// columns: [
|
// {
|
// prop: "storageCode",
|
// label: "仓库编号",
|
// width: 100
|
// },
|
// {
|
// prop: "storageName",
|
// label: "仓库名称",
|
// width: 150
|
// }
|
// ],
|
// url: "/api/basicInfo/base/storage/getList",
|
// searchFields: "storage_Id,storageCode,storageName"
|
// };
|
// } else if (data.options.prop === "consignorName") {
|
// // 货主默认值
|
// customJson = {
|
// columns: [
|
// {
|
// prop: "consignorCode",
|
// label: "货主编号",
|
// width: 100
|
// },
|
// {
|
// prop: "consignorName",
|
// label: "货主名称",
|
// width: 150
|
// }
|
// ],
|
// url: "/api/basicInfo/base/consignor/getList",
|
// searchFields: "consignor_Id,consignorCode,consignorName"
|
// };
|
// } else if (data.options.prop === "productName") {
|
// // 物料默认值
|
// customJson = {
|
// columns: [
|
// {
|
// prop: "productCode",
|
// label: "物料编号",
|
// width: 100
|
// },
|
// {
|
// prop: "productName",
|
// label: "物料名称",
|
// width: 150
|
// }
|
// ],
|
// url: "/api/basicInfo/base/productInfo/getList",
|
// searchFields: "product_Id,productCode,productModel,productName,productSpec"
|
// };
|
// }
|
// }
|
let options = {};
|
if (item && item.options) {
|
options = item.options;
|
}
|
this.$set(data, "options", Object.assign({}, options, customJson));
|
if (data.type === "radio") {
|
this.$set(data.options, "inline", true);
|
}
|
},
|
handleOptionsRemove(index) {
|
if (this.data.type === "grid") {
|
this.data.columns.splice(index, 1);
|
} else {
|
this.data.options.options.splice(index, 1);
|
}
|
},
|
handleAddOption() {
|
if (this.data.options.showLabel) {
|
this.data.options.options.push({
|
value: "新选项",
|
label: "新选项"
|
});
|
} else {
|
this.data.options.options.push({
|
value: "新选项"
|
});
|
}
|
},
|
handleAddColumn() {
|
this.data.columns.push({
|
span: "",
|
fields: []
|
});
|
},
|
generateRule() {
|
this.data.rules = [];
|
Object.keys(this.validator).forEach(key => {
|
if (this.validator[key]) {
|
this.data.rules.push(this.validator[key]);
|
}
|
});
|
},
|
handleSelectMuliple(value) {
|
if (value) {
|
if (this.data.options.defaultValue) {
|
this.data.options.defaultValue = [this.data.options.defaultValue];
|
} else {
|
this.data.options.defaultValue = [];
|
}
|
} else {
|
if (this.data.options.defaultValue.length > 0) {
|
this.data.options.defaultValue = this.data.options.defaultValue[0];
|
} else {
|
this.data.options.defaultValue = "";
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.widget-config {
|
.col-param {
|
/deep/ .el-input__inner {
|
padding: 0 5px;
|
}
|
}
|
/deep/ .el-input__inner {
|
padding: 0 5px;
|
}
|
/deep/ .el-input-number .el-input__inner {
|
padding-left: 5px;
|
padding-right: 40px;
|
}
|
/deep/ .el-form-item {
|
margin-bottom: 0px;
|
}
|
}
|
</style>
|
