更新
This commit is contained in:
xiaozhiyong
94
src/components/autocomplete/index.vue
Normal file
94
src/components/autocomplete/index.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="params[config.querykey]"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
reserve-keyword
|
||||
:placeholder="config.placeholder"
|
||||
:remote-method="remoteMethod"
|
||||
@clear="list = []"
|
||||
:disabled="isDisabled"
|
||||
@change="change"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id + index"
|
||||
:label="item[config.labelKey]"
|
||||
:value="item[config.valueKey]"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
params: Object,
|
||||
config: Object,
|
||||
// config: {
|
||||
// serveTarget: {}, // 远程搜索接口
|
||||
// autocompleteKey: "", //远程搜索接口参数名
|
||||
// labelKey: "", //接口返回数据label名
|
||||
// valueKey: "", //接口返回数据唯一值
|
||||
// querykey: "", //查询接口参数名
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text: "",
|
||||
list: [],
|
||||
isDisabled: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"config.echoId": {
|
||||
handler(nval, oval) {
|
||||
if (nval) {
|
||||
this.remoteMethod(this.config.echoName);
|
||||
}
|
||||
this.isDisabled = !!this.config.isDisabled;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 远程搜索
|
||||
remoteMethod(query) {
|
||||
if (query !== "") {
|
||||
this.loading = true;
|
||||
let params = {};
|
||||
let type = this.$utils.typeJudgment(this.config.autocompleteKey);
|
||||
if (!type.includes("Object") && !type.includes("String")) return;
|
||||
|
||||
if (type.includes("Object")) {
|
||||
params[this.config.autocompleteKey.key] = query;
|
||||
params["enableMark"] = this.config.autocompleteKey.enableMark;
|
||||
}
|
||||
if (type.includes("String")) {
|
||||
this.config.autocompleteKey
|
||||
? (params[this.config.autocompleteKey] = query)
|
||||
: (params["queryTypeGet"] = query);
|
||||
}
|
||||
this.config.serveTarget(params).then((res) => {
|
||||
let timeInstance = setTimeout(() => {
|
||||
this.loading = false;
|
||||
clearTimeout(timeInstance);
|
||||
if (res.data.length) {
|
||||
this.list = res.data;
|
||||
} else this.list = [];
|
||||
}, 1000 * Math.random());
|
||||
});
|
||||
} else {
|
||||
this.list = [];
|
||||
}
|
||||
},
|
||||
change(val) {
|
||||
this.$emit("change", val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="generalDetails_body">
|
||||
<div class="generalDetails_body pft14">
|
||||
<div class="generalDetails_header" v-if="isHeader">
|
||||
<slot name="generalDetails_header">
|
||||
{{ title }}
|
||||
@@ -37,21 +37,27 @@
|
||||
:style="{ maxHeight: item.isFold ? '100vh' : '0px' }"
|
||||
class="my-cell"
|
||||
>
|
||||
<div v-for="(i, x) in item.listData" :key="x" class="cell-item">
|
||||
<span :title="i.remark" class="color-999 test-tst">
|
||||
{{ i.label }}
|
||||
<i v-if="i.remark" class="header-icon el-icon-info"></i>
|
||||
<i
|
||||
@click="isCopy($event)"
|
||||
v-if="i.isCopy"
|
||||
class="el-icon-document-copy"
|
||||
></i>
|
||||
</span>
|
||||
<br />
|
||||
<slot class="inner-data" :name="`${i.field}`">
|
||||
<span class="inner-data">{{ i.value }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
<template
|
||||
v-if="item.listData.length && item.listData[0].field !== 'table'"
|
||||
>
|
||||
<div v-for="(i, x) in item.listData" :key="x" class="cell-item">
|
||||
<span :title="i.remark" class="color-999 test-tst">
|
||||
{{ i.label }}
|
||||
<i v-if="i.remark" class="header-icon el-icon-info"></i>
|
||||
<i
|
||||
@click="isCopy($event)"
|
||||
v-if="i.isCopy"
|
||||
class="el-icon-document-copy"
|
||||
></i>
|
||||
</span>
|
||||
<br />
|
||||
<slot class="inner-data" :name="`${i.field}`">
|
||||
<span class="inner-data">{{ i.value }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<slot v-else name="table"> </slot>
|
||||
</div>
|
||||
</el-card>
|
||||
<div>
|
||||
@@ -73,8 +79,8 @@ export default {
|
||||
name: "generalDetails",
|
||||
props: {
|
||||
sourceData: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
mappingData: {
|
||||
type: Array,
|
||||
@@ -95,6 +101,7 @@ export default {
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// return console.log("this.sourceData", this.sourceData);
|
||||
this.sourceData !== null && this.mappingData.length !== 0 && this.init();
|
||||
},
|
||||
methods: {
|
||||
@@ -108,18 +115,45 @@ export default {
|
||||
this.$emit("close");
|
||||
},
|
||||
init() {
|
||||
this.dataPage = this.mappingData.map((item) => {
|
||||
this.dataPage = this.mappingData.map(
|
||||
(mappingDataItem, mappingDataIndex) => {
|
||||
let shineData = this.sourceData[mappingDataIndex] || {};
|
||||
return {
|
||||
title: mappingDataItem.carTitle,
|
||||
iconClass: mappingDataItem.iconClass || "iconjichuziliao",
|
||||
isFold: mappingDataItem.isFold || true,
|
||||
listData: mappingDataItem.carItems.map((carItem) => {
|
||||
let value =
|
||||
(typeof carItem.value == "function" &&
|
||||
carItem.value(shineData)) ||
|
||||
shineData[carItem.value] == 0
|
||||
? 0
|
||||
: shineData[carItem.value] || carItem.fieldDefault || "";
|
||||
return {
|
||||
label: carItem.label,
|
||||
value: value,
|
||||
field: carItem.value,
|
||||
remark: carItem.remark,
|
||||
isCopy: carItem.isCopy || false,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
);
|
||||
console.log("this.dataPage", this.dataPage);
|
||||
return;
|
||||
this.dataPage = this.mappingData.map((item, index) => {
|
||||
return {
|
||||
title: item.carTitle,
|
||||
iconClass: item.iconClass || "iconjichuziliao",
|
||||
isFold: item.isFold || true,
|
||||
listData: item.carItems.map((carItem, index) => {
|
||||
listData: item.carItems.map((carItem) => {
|
||||
return {
|
||||
label: carItem.label,
|
||||
value:
|
||||
(typeof carItem.value == "function" &&
|
||||
carItem.value(this.sourceData)) ||
|
||||
this.sourceData[carItem.value] ||
|
||||
carItem.value(this.sourceData[index])) ||
|
||||
this.sourceData[index][carItem.value] ||
|
||||
carItem.fieldDefault ||
|
||||
"暂无数据",
|
||||
field: carItem.value,
|
||||
@@ -134,7 +168,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.title_bottom {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user