Commit 38b9b115 authored by 何虹's avatar 何虹 💬

优化下拉组件

parent 115af5c3
<template> <template>
<div style="width:500px"> <div style="width:500px">
<hsSwitch <hsSelectPlus
v-model="checkList" v-model="formData.test_p"
:allSourceData='configData' :allSourceData='allSourceData'
></hsSwitch> :requestMethod='requestMethod'
:writeBackObject='formData'
></hsSelectPlus>
</div> </div>
</template> </template>
<script> <script>
import uc from "./apiUc"; import apiUc from "./apiUc";
export default { export default {
mixins: [uc], mixins: [apiUc],
data() { data() {
return { return {
value1: "", formData: {
checkList: "", test_p: ""
configData: { },
sourceData: [], allSourceData: {
config: { config: {
activeText: "A", url: "",
inactiveText: "B", isInnerRequest: true, // 静态查询时 是否在内部请求数据
changeed: () => { proxyTag: "commonUtilAPI", //代理前缀
console.log(21312); ref: {
const_id: "0", // 常量id
table_name: "mmMaterialCategory", // 表名
columns: "id,material_category", // 查询列
remote_condition: "material_category", // 远程搜索字段
displayfield: "", // 显示默认值
writebackfield: [] // 回写对象
},
multiple: false,
is_computed: false,
disabled: false,
size: "mini",
clearable: true,
title: "",
placeholder: "",
value: "id",
label: "material_category",
linkBtnUi: {
url:
"http://47.110.145.204:59168/queryBi/web//#/DyncUI/Single/PBArchive/pb_unit",
writeProp: {
test_p: "unit_name" // 后面这个值是弹出页面返回过来的字段,回写给writeBackObject中的某个属性
},
parms: {}
} }
} },
sourceData: [] // [{value:'',lable:''}] 的形式
} }
}; };
}, },
methods: {} mounted() {},
methods: {
printResult() {
console.log(this.formData);
}
}
}; };
</script> </script>
\ No newline at end of file <style scoped>
.codeTxt {
text-align: left;
}
</style>
\ No newline at end of file
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
</template> </template>
<template v-if="item.type==='textarea'"> <template v-if="item.type==='textarea'">
<el-input <el-input
autosize
style="width:100%" style="width:100%"
type='textarea' type='textarea'
clearable clearable
......
...@@ -480,7 +480,7 @@ export default { ...@@ -480,7 +480,7 @@ export default {
// 节流 // 节流
remoteMethodsDebounce: _.debounce(async function(query) { remoteMethodsDebounce: _.debounce(async function(query) {
if (this.is_mock) return; if (this.is_mock) return;
const data = await this.requestMethod(this.configData, query); const data = await this.requestMethod(this.configData, query || "");
this.options = this.tansLate(data || []); this.options = this.tansLate(data || []);
}, 1000), }, 1000),
async remoteMethod_(query) { async remoteMethod_(query) {
...@@ -510,6 +510,7 @@ export default { ...@@ -510,6 +510,7 @@ export default {
}, },
select_focus(event) { select_focus(event) {
const { remote_condition } = this.configData.ref; const { remote_condition } = this.configData.ref;
debugger;
if (remote_condition && !this.is_mock) { if (remote_condition && !this.is_mock) {
this.remoteMethod_(); this.remoteMethod_();
} }
......
<template> <template>
<div class="hsTags" :id='elId' style="{width:100%;height:100%}"> <div
<el-tag :style="style" :size='configData.size' @click="clickTagItem(item)" class="hsTagsItem" v-for="(item,index) in tagsList" :key="index" :type="item.type"> class="hsTags"
{{item.title}} :id='elId'
</el-tag> style="{width:100%;height:100%}"
<jsoneditor >
v-model='jsoneditorVisible' <el-tag
:elInfo='elInfo' :style="style"
:layout='layout' :size='configData.size'
:jsoneditorCloseAfter='jsoneditorCloseAfter' @click="clickTagItem(item)"
:jsoneditorOpenAfter='jsoneditorOpenAfter' class="hsTagsItem"
> v-for="(item,index) in tagsList"
:key="index"
:type="item.type"
>
{{item.title}}
</el-tag>
<jsoneditor
v-model='jsoneditorVisible'
:elInfo='elInfo'
:layout='layout'
:jsoneditorCloseAfter='jsoneditorCloseAfter'
:jsoneditorOpenAfter='jsoneditorOpenAfter'
>
</jsoneditor> </jsoneditor>
</div> </div>
</template> </template>
<script> <script>
import jsoneditor from '../common/jsoneditor' import jsoneditor from "../common/jsoneditor";
import ucComponent from '../ucClass/uc_component' import ucComponent from "../ucClass/uc_component";
import uuidv1 from 'uuid/v1' import uuidv1 from "uuid/v1";
import _ from 'lodash' import _ from "lodash";
export default { export default {
mixins: [ucComponent], mixins: [ucComponent],
components: { components: {
jsoneditor jsoneditor
}, },
name: 'hsTags', name: "hsTags",
props: { props: {
value: '', value: "",
elInfo: { elInfo: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
allSourceData: { allSourceData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
}, },
...@@ -54,84 +66,96 @@ export default { ...@@ -54,84 +66,96 @@ export default {
watch: { watch: {
allSourceData: { allSourceData: {
handler: function(newVal, oldVal) { handler: function(newVal, oldVal) {
this.initConfigData(newVal) this.initConfigData(newVal);
}, },
deep: true deep: true
}, },
value(val) { value(val) {
this.value_inner = val this.value_inner = val;
this.setDefaultVal(val) this.setDefaultVal(val);
}, },
value_inner(val) { value_inner(val) {
this.$emit('input', val) console.log(val,'val')
this.$emit("input", val);
} }
}, },
data() { data() {
return { return {
tagsList: [], tagsList: [],
elId: '', elId: "",
jsoneditorVisible: false, jsoneditorVisible: false,
buttonText: '操作', buttonText: "操作",
clickTimer: null, clickTimer: null,
configData: { configData: {
type: 'primary', type: "primary",
size: 'medium' size: "medium"
}, },
style: {}, style: {},
value_inner: '' value_inner: ""
} };
}, },
created() { created() {
this.elId = uuidv1() // 获取随机id this.elId = uuidv1(); // 获取随机id
}, },
mounted() { mounted() {
this.initConfigData(this.allSourceData) this.initConfigData(this.allSourceData);
}, },
methods: { methods: {
setDefaultVal(val) { setDefaultVal(val) {
this.tagsList.forEach(item => { this.tagsList.forEach(item => {
if (item.title === val) { if (item.title === val) {
item.type = 'success' item.type = "success";
} else { } else {
item.type = 'primary' item.type = "primary";
} }
}) });
}, },
initConfigData(data = {}) { initConfigData(data = {}) {
const config = data.config || {} const config = data.config || {};
const style = config.style || {} const style = config.style || {};
this.style = style this.style = style;
const sourceData = data.sourceData || [] const sourceData = data.sourceData || [];
this.tagsList = sourceData.length ? sourceData : [{ title: '测试' }] this.tagsList = sourceData.length ? sourceData : [{ title: "测试" }];
this.configData = Object.assign(_.cloneDeep(this.configData), _.cloneDeep(config)) this.configData = Object.assign(
_.cloneDeep(this.configData),
_.cloneDeep(config)
);
}, },
clickTagItem(item) { clickTagItem(item) {
this.tagsList.forEach(x => { this.tagsList.forEach(x => {
x.type = 'primary' x.type = "primary";
if (x.title === item.title) { if (x.title === item.title) {
item.type = 'success' item.type = "success";
} else { } else {
x.type = 'primary' x.type = "primary";
} }
}) });
const parm = {} this.value_inner = item.title || item.id;
parm[this.elInfo.prop] = item.title || item.id const { clicked } = this.configData;
this.$emit('clickTagItem', parm) this.execAction(clicked, item);
this.$emit("click", item);
},
execAction(actionName, value) {
const type = typeof actionName;
if (type === "function") {
actionName(value);
}
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
.hsTags{ .hsTags {
padding: 2px 1px 1px 1px; padding: 2px 1px 1px 1px;
width:90%; width: 90%;
height:100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.hsTagsItem{ .hsTagsItem {
margin-left: 10px; margin-left: 10px;
} }
/* .hsTags>>>.el-tag--medium{ /* .hsTags>>>.el-tag--medium{
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment