feat: 添加xselect组件并注册到全局
This commit is contained in:
parent
15db849fd6
commit
733e3ba9bf
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-input
|
||||
ref="inputRef0"
|
||||
:value-on-clear="null"
|
||||
style="display: none"
|
||||
v-model="inputValue"
|
||||
>
|
||||
</el-input>
|
||||
<el-input
|
||||
:value-on-clear="null"
|
||||
:readonly="true"
|
||||
ref="inputRef"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="inputLabel"
|
||||
>
|
||||
</el-input>
|
||||
<div v-if="edit">
|
||||
<el-popover
|
||||
v-model:visible="showPopover"
|
||||
trigger="click"
|
||||
virtual-triggering
|
||||
:virtual-ref="inputRef"
|
||||
:width="tableWidth"
|
||||
>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="关键词查找"
|
||||
@keyup.enter="handleQuery"
|
||||
></el-input>
|
||||
<div style="height: 2px"></div>
|
||||
<scTable
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
:params="params"
|
||||
:query="query"
|
||||
:height="tableHeight"
|
||||
row-key="id"
|
||||
stripe
|
||||
@row-click="rowClick"
|
||||
:hidePagination="hidePagination"
|
||||
paginationLayout="prev, pager, next"
|
||||
hideDo
|
||||
>
|
||||
<slot></slot>
|
||||
</scTable>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
edit: { type: Boolean, default: true },
|
||||
hidePagination: { type: Boolean, default: false },
|
||||
tableWidth: { type: Number, default: 600 },
|
||||
tableHeight: { type: Number, default: 400 },
|
||||
apiObj: { type: Object, default: () => {}, required: true },
|
||||
params: { type: Object, default: () => {} },
|
||||
label: { type: String, default: "" },
|
||||
modelValue: { type: String, default: null },
|
||||
labelField: { type: String, default: "name" },
|
||||
valueField: { type: String, default: "id" },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "update:label"]);
|
||||
|
||||
// 控制 popover 显示与隐藏的状态
|
||||
const showPopover = ref(false);
|
||||
const inputRef = ref();
|
||||
const inputRef0 = ref();
|
||||
const table = ref();
|
||||
const inputLabel = computed({
|
||||
get() {
|
||||
return props.label;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:label", val);
|
||||
},
|
||||
});
|
||||
const inputValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit("update:modelValue", val);
|
||||
},
|
||||
});
|
||||
|
||||
const keyword = ref("");
|
||||
const query = ref({ search: "" });
|
||||
|
||||
const handleQuery = () => {
|
||||
query.value.search = keyword.value;
|
||||
table.value.queryData(query.value);
|
||||
};
|
||||
|
||||
const rowClick = (row) => {
|
||||
inputLabel.value = row[props.labelField];
|
||||
inputValue.value = row[props.valueField];
|
||||
showPopover.value = false;
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import ehsUserSelect from './components/ehsSelect/userselect'
|
||||
import ehsEpSelect from './components/ehsSelect/epselect'
|
||||
import ehsSelect from './components/ehsSelect/select'
|
||||
import ehsTableSelect from './components/ehsSelect/tableSelect'
|
||||
import xSelect from './components/ehsSelect/xselect.vue'
|
||||
export default {
|
||||
install(app) {
|
||||
app.component('ehsUserSelect', ehsUserSelect);
|
||||
app.component('ehsEpSelect', ehsEpSelect);
|
||||
app.component('ehsSelect', ehsSelect);
|
||||
app.component('ehsTableSelect', ehsTableSelect);
|
||||
app.component('xSelect', xSelect);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<el-menu-item index="1" @click="currentM='二维码'">二维码</el-menu-item>
|
||||
<el-menu-item index="2" @click="currentM='带默认的选择'">带默认的选择</el-menu-item>
|
||||
<el-menu-item index="3" @click="currentM='图标选择'">图标选择</el-menu-item>
|
||||
<el-menu-item index="4" @click="currentM='表格选择'">表格选择</el-menu-item>
|
||||
<el-menu-item index="4" @click="currentM='xselect'">xselect</el-menu-item>
|
||||
<el-menu-item index="5" @click="currentM='vue-echarts'">vue-echarts</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
<div v-if="currentM=='图标选择'">
|
||||
<scIconSelect></scIconSelect>
|
||||
</div>
|
||||
<div v-if="currentM=='表格选择'">
|
||||
<ehsTableSelect :apiObj="apiObj2" v-model="x2">
|
||||
<el-table-column label="姓名" prop="name"></el-table-column>
|
||||
<el-table-column
|
||||
label="账号"
|
||||
prop="username"
|
||||
></el-table-column>
|
||||
</ehsTableSelect>
|
||||
<div v-if="currentM=='xselect'">
|
||||
<xSelect :apiObj="apiObj" v-model="x2" v-model:label="x2_name" style="width: 200px">
|
||||
<el-table-column label="id" prop="id"></el-table-column>
|
||||
<el-table-column label="名称" prop="name"></el-table-column>
|
||||
</xSelect>
|
||||
<!-- <el-button @click="showx2"></el-button> -->
|
||||
</div>
|
||||
<div v-if="currentM=='vue-echarts'">
|
||||
<v-chart :option="chartOption" autoresize style="height: 400px; width: 400px"/>
|
||||
|
|
@ -53,7 +51,8 @@ export default {
|
|||
x_name: "光芯科技",
|
||||
// x:null,
|
||||
apiObj2: this.$API.system.user.list,
|
||||
x2: {},
|
||||
x2: "3347207082608115712",
|
||||
x2_name: "烧成车间",
|
||||
chartOption: {
|
||||
textStyle: {
|
||||
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
|
||||
|
|
@ -103,6 +102,10 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
showx2(){
|
||||
// console.log(this.x2)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue