feat: 🚀 订阅功能
This commit is contained in:
189
src/components/FormTable/index.vue
Normal file
189
src/components/FormTable/index.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="detailsTable">
|
||||
<el-table :data="tableData" :border="true" ref="tableRef" :height="height ? height : 340" :row-style="rowStyle">
|
||||
<template v-for="item in columns" :key="item.prop">
|
||||
<el-table-column
|
||||
:prop="item.prop"
|
||||
:fixed="item.fixed"
|
||||
:align="item.align ? item.align : 'center'"
|
||||
:label="item.label"
|
||||
:width="item.width ? item.width : 'auto'"
|
||||
v-show="item.show"
|
||||
:sortable="item.sortable"
|
||||
:showOverflowTooltip="!item.formType"
|
||||
>
|
||||
<template #header v-if="item.isHeaderIcon">
|
||||
<span class="iconfont icon-bianji1 iconfont-mg" style="font-size: 12px">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span
|
||||
style="display: inline-block; margin-left: 4px; line-height: 20px; color: #f56c6c"
|
||||
v-if="item.required"
|
||||
>*</span
|
||||
>
|
||||
<el-tooltip effect="dark" :content="item.tooltip" placement="top" v-if="item.tooltip">
|
||||
<el-icon style="cursor: pointer"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<template #default="scope" v-if="item.formType === 'inputNumber'">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="1000"
|
||||
:controls="false"
|
||||
style="width: 125px"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
:disabled="tableData[scope.$index].disabled"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxLength"
|
||||
step-strictly
|
||||
@keyup.enter="handleEnterInput(item, scope.$index)"
|
||||
></el-input-number>
|
||||
</template>
|
||||
<template #default="scope" v-if="item.formType === 'checkbox'">
|
||||
<el-checkbox v-model="scope.row[item.prop]" @change="handleCheckBox(scope.row, scope.$index)" />
|
||||
</template>
|
||||
<template #default="scope" v-if="item.formType === 'input'">
|
||||
<el-input
|
||||
:style="item.width ? item.width : 'width:125px'"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
:disabled="tableData[scope.$index].disabled"
|
||||
:placeholder="item.placeholder"
|
||||
:maxlength="item.maxLength"
|
||||
@input="verificationInput(item, scope.$index)"
|
||||
@keyup.enter="handleEnterInput(item, scope.$index)"
|
||||
ref="inputRef"
|
||||
></el-input>
|
||||
</template>
|
||||
<!-- 这个是有远程功能的 -->
|
||||
<template #default="scope" v-if="item.formType === 'selectRemote'">
|
||||
<el-select
|
||||
:placeholder="item.placeholder"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
style="width: 280px"
|
||||
v-model.trim="scope.row[item.prop]"
|
||||
class="m-2 select"
|
||||
:disabled="tableData[scope.$index].disabled"
|
||||
remote-show-suffix
|
||||
:loading="loading"
|
||||
@clear="clear(scope.$index)"
|
||||
:remote-method="(query:any)=>{
|
||||
remoteMethod(query,item.prop,scope.$index)
|
||||
}"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options[scope.$index]"
|
||||
:key="option.materialNumber"
|
||||
:label="option.specifications"
|
||||
:value="option.idConvertBar"
|
||||
@click="handleRemoteClick(item, scope.$index)"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<!-- 最后一列的按钮 这是一个具名插槽 -->
|
||||
<template #default="scope" v-if="item.prop === 'operation'">
|
||||
<slot name="operation" v-bind="scope"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="FormTable">
|
||||
// import { cloneDeep } from "lodash-es";
|
||||
import { ElTable, ElTableColumn } from "element-plus";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
const props = defineProps<{
|
||||
columns: any;
|
||||
rowStyle?: (params: any) => void;
|
||||
isStatus?: boolean;
|
||||
tableData?: any;
|
||||
height?: number;
|
||||
getRemoteData?: (params: any) => void;
|
||||
verificationInput?: (params: any) => void;
|
||||
handleKeyupEnterInputValue?: (params: any) => void;
|
||||
handleClear?: (params: any) => void;
|
||||
handleCheckEmit?: (prams: any) => void;
|
||||
loading?: any;
|
||||
}>();
|
||||
|
||||
console.log(props, "=========props===========");
|
||||
const emits = defineEmits<{
|
||||
(e: "getRemoteData", params: any): void;
|
||||
(e: "verificationInput", params: any): void;
|
||||
(e: "handleRemoteClickValue", params: any): void;
|
||||
(e: "handleKeyupEnterInputValue", params: any): void;
|
||||
(e: "handleClear", params: any): void;
|
||||
(e: "handleCheckEmit", params: any): void;
|
||||
}>();
|
||||
//表格实例
|
||||
const tableRef = ref<any>(null);
|
||||
const inputRef = ref<any>(null);
|
||||
const selectRemote1Ref = ref<any>(null);
|
||||
|
||||
//远程搜索
|
||||
const remoteMethod = async (val: any, prop: string, index: number) => {
|
||||
emits("getRemoteData", {
|
||||
val,
|
||||
prop,
|
||||
index
|
||||
});
|
||||
};
|
||||
const handleCheckBox = (row: any, index: number) => {
|
||||
emits("handleCheckEmit", {
|
||||
index
|
||||
});
|
||||
};
|
||||
//表单输入验证函数
|
||||
const verificationInput = (item: any, index: number) => {
|
||||
const { prop } = item;
|
||||
emits("verificationInput", {
|
||||
prop,
|
||||
index
|
||||
});
|
||||
};
|
||||
const handleRemoteClick = (item: any, index: number) => {
|
||||
emits("handleRemoteClickValue", { item, index });
|
||||
};
|
||||
const handleEnterInput = (item: any, index: number) => {
|
||||
console.log("1232323");
|
||||
emits("handleKeyupEnterInputValue", {
|
||||
item,
|
||||
index
|
||||
});
|
||||
};
|
||||
const clear = (index: any) => {
|
||||
emits("handleClear", {
|
||||
index
|
||||
});
|
||||
console.log(index);
|
||||
};
|
||||
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
element: tableRef,
|
||||
inputElement: inputRef,
|
||||
selectRemoteElement: selectRemote1Ref
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.table-box .el-table .el-table__header .el-table__cell > .cell) {
|
||||
.cell {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
::v-deep(.el-table__row td) {
|
||||
div {
|
||||
white-space: wrap;
|
||||
}
|
||||
}
|
||||
::v-deep(.el-table__body-wrapper .el-table__body) {
|
||||
min-height: 51px !important;
|
||||
max-height: 90% !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user