'保安项目提交'
This commit is contained in:
esacpe
291
src/components/aboutTable/DarkTable.vue
Normal file
291
src/components/aboutTable/DarkTable.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@row-click="singleElection"
|
||||
@row-dblclick="rowdbClickHland"
|
||||
@row-contextmenu="rowcontextmenuHland"
|
||||
:row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border"
|
||||
:default-expand-all="getConfiger.defaultExpandAll"
|
||||
:stripe="getConfiger.stripe"
|
||||
:height="tableHeight"
|
||||
v-loading="tableConfiger.loading"
|
||||
:lazy="getConfiger.lazy"
|
||||
:load="load"
|
||||
:row-class-name="rowClassName"
|
||||
:tree-props="treePros"
|
||||
style="width: 100%; font-size: 16px"
|
||||
:header-cell-class-name="() => 'myTableHeadBgColorDark'"
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{
|
||||
height:
|
||||
getConfiger.rowHeight === 'auto'
|
||||
? getConfiger.rowHeight
|
||||
: getConfiger.rowHeight + 'px'
|
||||
}"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
v-if="getConfiger.showSelectType === 'checkBox'"
|
||||
/>
|
||||
<el-table-column
|
||||
width="55"
|
||||
v-else-if="getConfiger.showSelectType === 'radio'"
|
||||
#default="{ row }"
|
||||
>
|
||||
<el-radio
|
||||
class="radio"
|
||||
v-model="getConfiger.radioChoose"
|
||||
:label="row[getConfiger.rowKey]"
|
||||
> </el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
v-if="getConfiger.showIndex"
|
||||
width="60"
|
||||
:align="getConfiger?.align"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableColumn"
|
||||
:align="getConfiger?.align"
|
||||
:prop="item.prop"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip || false"
|
||||
:sortable="item.sortable || false"
|
||||
>
|
||||
<!-- 使用自定义表头 -->
|
||||
<template v-if="item.showSoltHeader" #header="column">
|
||||
<span class="header-icon">
|
||||
<slot :name="item.prop+'head'" v-bind="column"></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<!-- 使用自定义 -->
|
||||
<template v-if="item.showSolt" #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
<!-- 默认 -->
|
||||
<template v-else #default="{ row }">
|
||||
{{ row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作 -->
|
||||
<el-table-column
|
||||
v-if="getConfiger.haveControls"
|
||||
:fixed="fixed"
|
||||
:label="getConfiger.controls"
|
||||
:width="controlsWidth"
|
||||
:align="getConfiger?.align"
|
||||
>
|
||||
<template #default="scope">
|
||||
<slot name="controls" v-bind="scope"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
|
||||
const props = defineProps({
|
||||
tableConfiger: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
controlsWidth: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
tableHeight: {
|
||||
type: Number
|
||||
},
|
||||
treePros: {
|
||||
type: Object,
|
||||
default: {
|
||||
children: "children",
|
||||
hasChildren: "hasChildren"
|
||||
}
|
||||
},
|
||||
fixed: {
|
||||
type: String,
|
||||
default: "right"
|
||||
}
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const emit = defineEmits(["chooseData","rowdbClickHland","rowcontextmenuHland"]);
|
||||
const multipleTableRef = ref();
|
||||
const currentRow = ref();
|
||||
let getConfiger = reactive({
|
||||
showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
|
||||
showIndex: true, // 是否显示索引
|
||||
rowKey: null, // 如果是树形表格必须设置rowKey
|
||||
border: true, // 是否显示边框
|
||||
defaultExpandAll: false, // 是否展开全部
|
||||
loading: false,
|
||||
align: "center", // 列的对齐方式 left / center / right
|
||||
haveControls: true, // 是否有操作列
|
||||
controls: "操作", // 操作列的表头
|
||||
stripe: false, // 是否有斑马线
|
||||
lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置 hasChildren: true,才会显示展开icon
|
||||
portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
|
||||
defaultSelectKeys: [], // 默认选中的key集合
|
||||
radioChoose: "", // 单选时选中的值------------------------------------------- 待完成
|
||||
rowHeight: "41", // 每行的高度
|
||||
//用作指定行自定义行样式
|
||||
rowClassProp:"", //行匹配字段名称
|
||||
rowClassLinght:"", //行匹配数据
|
||||
});
|
||||
watchEffect(() => {
|
||||
getConfiger = { ...getConfiger, ...props.tableConfiger };
|
||||
setDefaultChoose();
|
||||
});
|
||||
onMounted(() => {
|
||||
setDefaultChoose();
|
||||
});
|
||||
const rowClassName = ({ row, rowIndex }) => {
|
||||
if(row[getConfiger.rowClassProp] == getConfiger.rowClassLinght){
|
||||
return "table_light_row";
|
||||
}
|
||||
if (rowIndex % 2 == 0) {
|
||||
return "";
|
||||
} else {
|
||||
return "table_blue_row";
|
||||
}
|
||||
};
|
||||
// 可选的时候选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
emit("chooseData", val);
|
||||
};
|
||||
// 单选的时候选择的数据
|
||||
const handleCurrentChange = (val) => {
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
};
|
||||
const singleElection = (val) => {
|
||||
if (getConfiger.showSelectType === "radio") {
|
||||
getConfiger.radioChoose = val[getConfiger.rowKey];
|
||||
// emit("chooseData", val);
|
||||
}
|
||||
};
|
||||
// 懒加载数据的方法
|
||||
const load = (date, treeNode, resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
id: 31,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
};
|
||||
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
|
||||
function setDefaultChoose() {
|
||||
nextTick(() => {
|
||||
// 多选的默认选中
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "checkBox"
|
||||
) {
|
||||
props.tableData.forEach((item) => {
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys.findIndex(
|
||||
(v) => v === item[props.tableConfiger.rowKey]
|
||||
) > -1
|
||||
) {
|
||||
multipleTableRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
// 单选的默认选中
|
||||
} else if (
|
||||
props.tableConfiger.defaultSelectKeys &&
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "radio"
|
||||
) {
|
||||
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
//当某一行被双击时会触发该事件
|
||||
const rowdbClickHland = (row) => {
|
||||
emit("rowdbClickHland", row);
|
||||
};
|
||||
//当某一行右键点击时会触发该事件
|
||||
const rowcontextmenuHland = (row,column,e) => {
|
||||
e.preventDefault();
|
||||
emit("rowcontextmenuHland", {row,e});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang = "scss">
|
||||
.myTableHeadBgColorDark {
|
||||
background-color: rgba(18, 97, 192, 0.3) !important;
|
||||
color: #008efc;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang = "scss" scoped>
|
||||
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
|
||||
font-size: 14px;
|
||||
}
|
||||
::v-deep .el-table {
|
||||
background-color: transparent;
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-row-hover-bg-color: #008ffd4b;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
color: #1f84ff;
|
||||
border-bottom: none;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: transparent;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
background: transparent;
|
||||
}
|
||||
::v-deep .el-table .table_blue_row {
|
||||
background: #072343;
|
||||
}
|
||||
::v-deep .el-table .table_light_row{
|
||||
background: #6b933d;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
padding: 0;
|
||||
line-height: unset;
|
||||
}
|
||||
::v-deep .el-table__body tr.current-row>td.el-table__cell{
|
||||
background: #002961;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right{
|
||||
/* background: none !important; */
|
||||
}
|
||||
</style>
|
||||
204
src/components/aboutTable/FormMessage.vue
Normal file
204
src/components/aboutTable/FormMessage.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<el-form ref="elform" :model="listQuery" :disabled="disabled" :label-width="props.labelWidth" :rules="props.rules"
|
||||
:inline="true" label-position="right">
|
||||
<div class="form-row" v-for="(child, idx) in props.formList" :key="idx"
|
||||
:style="{ width: Object.prototype.toString.call(child) === '[object Object]' ? child.width : '' }">
|
||||
<template v-if="Array.isArray(child)">
|
||||
<el-form-item v-for="(item, childIdx) in child" :key="childIdx" :prop="item.prop" :label="item.label"
|
||||
:label-width="item.labelWidth" :style="{ width: child.width }">
|
||||
<!-- input表单 input lx:textarea || number-->
|
||||
<MOSTY.Other v-if="item.type == 'input'" :type="item.lx" :rows="item.rows || 4" width="100%" clearable
|
||||
v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" :disabled="item.disabled" />
|
||||
<!-- <el-input v-model="listQuery[item.prop]" v-else-if="item.lx == 'textarea'" type="textarea" :rows="3"
|
||||
:placeholder="`请输入${item.label}`" :disabled="item.disabled" /> -->
|
||||
<!-- 数值 number-->
|
||||
<el-input-number v-else-if="item.type == 'number'" @change="handleNum" v-model="listQuery[item.prop]"
|
||||
style="width:100%" :min="item.min || 0" :max="item.max || 1000" />
|
||||
<!--选择 select-->
|
||||
<MOSTY.Select v-else-if="item.type == 'select'" @change="handleNum" filterable :multiple="item.multiple"
|
||||
v-model="listQuery[item.prop]" :dictEnum="item.options" width="100%" clearable
|
||||
:placeholder="`请选择${item.label}`" />
|
||||
<!-- 选择性别 -->
|
||||
<MOSTY.Sex v-else-if="item.type == 'Sex'" v-model:sex="listQuery[item.prop]" width="100%" clearable
|
||||
:placeholder="`请选择${item.label}`" />
|
||||
<!--其他类型other： lx：EDUCATION（文化程度），NATION（民族）-->
|
||||
<MOSTY.PackageSelect v-else-if="item.type == 'other'" :dictEnum="item.lx" width="100%"
|
||||
v-model="listQuery[item.prop]" clearable filterable />
|
||||
<!-- 部门department -->
|
||||
<MOSTY.Department style="width:100%" v-else-if="item.type === 'department'" clearable
|
||||
:placeholder="listQuery.ssbm ? listQuery.ssbm : `请选择${item.label}`" v-model="listQuery[item.prop]" />
|
||||
<!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
|
||||
<MOSTY.Date v-else-if="item.type == 'date'" :type="item.lx ? item.lx : 'date'" width="100%" clearable
|
||||
v-model="listQuery[item.prop]" />
|
||||
<!-- 上传 upload limit:'限制张数'-->
|
||||
<MOSTY.Upload v-else-if="item.type == 'upload'" :isImg="item.isImg" :limit="item.limit" width="100%"
|
||||
v-model="listQuery[item.prop]" />
|
||||
<!--选择checkbox -->
|
||||
<MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]"
|
||||
:checkList="item.options" :placeholder="`请选择${item.label}`" />
|
||||
|
||||
<!-- 单选radio -->
|
||||
<el-radio-group v-else-if="item.type == 'radio'" v-model="listQuery[item.prop]">
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 开关 switch -->
|
||||
<el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2"
|
||||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.type === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
|
||||
unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD" />
|
||||
<el-date-picker v-else-if="item.type == 'datetime'" v-model="searchObj[item.prop]" type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
|
||||
<el-date-picker v-else-if="item.type === 'date'" v-model="searchObj[item.prop]" type="date"
|
||||
:placeholder="item.placeholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD">
|
||||
</el-date-picker>
|
||||
<!-- 插槽 slot -->
|
||||
<template v-else-if="item.type === 'slot'">
|
||||
<slot :name="item.prop"></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item v-if="child.type != 'slot'" :prop="child.prop" :label="child.label"
|
||||
:style="{ width: child.width }">
|
||||
<!-- input表单 input lx:textarea || number-->
|
||||
<MOSTY.Other v-if="child.type == 'input'" :type="child.lx" :rows="child.rows || 4" width="100%" clearable
|
||||
v-model="listQuery[child.prop]" :placeholder="`请输入${child.label}`" />
|
||||
<!-- 数值 number-->
|
||||
<el-input-number v-else-if="child.type == 'number'" @change="handleNum" v-model="listQuery[child.prop]"
|
||||
style="width:100%" :min="child.min || 0" :max="child.max || 1000" />
|
||||
<!--选择 select-->
|
||||
<MOSTY.Select v-else-if="child.type == 'select'" @change="handleNum" filterable :multiple="child.multiple"
|
||||
v-model="listQuery[child.prop]" :dictEnum="child.options" width="100%" clearable
|
||||
:placeholder="`请选择${child.label}`" />
|
||||
<!-- 部门department -->
|
||||
<MOSTY.Department style="width:100%" v-else-if="child.type === 'department'" clearable
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
|
||||
<MOSTY.Date v-else-if="child.type == 'date'" :type="child.lx ? child.lx : 'date'" width="100%" clearable
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!-- 上传 upload limit:'限制张数'-->
|
||||
<MOSTY.Upload v-else-if="child.type == 'upload'" :isImg="child.isImg" :limit="child.limit" width="100%"
|
||||
v-model="listQuery[child.prop]" />
|
||||
<!--选择checkbox -->
|
||||
<MOSTY.CheckBox v-else-if="child.type == 'checkbox'" width="100%" clearable v-model="listQuery[child.prop]"
|
||||
:checkList="child.options" :placeholder="`请选择${child.label}`" />
|
||||
<!-- 单选radio -->
|
||||
<el-radio-group v-else-if="child.type == 'radio'" v-model="listQuery[child.prop]">
|
||||
<el-radio v-for="obj in child.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 开关 switch -->
|
||||
<el-switch v-else-if="child.type == 'switch'" v-model="listQuery[child.prop]" class="ml-2"
|
||||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
</el-form-item>
|
||||
<!-- 插槽 slot -->
|
||||
<template v-if="child.type === 'slot'">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
|
||||
const props = defineProps({
|
||||
//循环的值
|
||||
formList: {
|
||||
default: [[]], //二维数组
|
||||
type: Array
|
||||
},
|
||||
rules: {
|
||||
default: {},
|
||||
type: Object
|
||||
},
|
||||
labelWidth: {
|
||||
default: "100px",
|
||||
type: String
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
});
|
||||
const elform = ref();
|
||||
const listQuery = ref({});
|
||||
const emits = defineEmits(["update:modelValue", 'change']);
|
||||
|
||||
// 提交
|
||||
const submit = (resfun) => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
resfun(listQuery.value);
|
||||
});
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
listQuery.value = {};
|
||||
elform.value.resetFields();
|
||||
};
|
||||
|
||||
// // 处理表单数据变化
|
||||
const handleNum = (val) => {
|
||||
emits('change', listQuery.value);
|
||||
};
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
listQuery.value = newVal; //赋值
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
watch(() => listQuery.value, (newVal) => {
|
||||
emits('update:modelValue', newVal)
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
defineExpose({ submit, reset });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item__label) {
|
||||
// background-color: #F7FAFB;
|
||||
// padding: 0px 8px;
|
||||
// color: #000;
|
||||
// font-weight: 500;
|
||||
// border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
color: #333;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.el-form-item--default {
|
||||
// margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
168
src/components/aboutTable/MyTable.vue
Normal file
168
src/components/aboutTable/MyTable.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||||
<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
|
||||
@current-change="handleCurrentChange" @row-click="singleElection" :row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border" :default-expand-all="getConfiger.defaultExpandAll" :stripe="getConfiger.stripe"
|
||||
:height="tableHeight" v-loading="tableConfiger.loading" :lazy="getConfiger.lazy" :load="load"
|
||||
:tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
|
||||
<el-table-column type="selection" width="55" v-if="getConfiger.showSelectType === 'checkBox'" />
|
||||
<el-table-column width="55" v-else-if="getConfiger.showSelectType === 'radio'" #default="{ row }">
|
||||
<el-radio class="radio" v-model="getConfiger.radioChoose" :label="row[getConfiger.rowKey]"> </el-radio>
|
||||
</el-table-column>
|
||||
<el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
|
||||
<el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"
|
||||
:label="item.label" :width="item.width" style="width: 100%; font-size: 14px"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip || false" :sortable="item.sortable || false">
|
||||
<!-- 使用自定义 -->
|
||||
<template v-if="item.showSolt" #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
<!-- 默认 -->
|
||||
<template v-else #default="{ row }">
|
||||
{{ row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 -->
|
||||
<el-table-column v-if="getConfiger.haveControls" :fixed="fixed" :label="getConfiger.controls"
|
||||
:width="controlsWidth" :align="getConfiger?.align">
|
||||
<template #default="scope">
|
||||
<slot name="controls" v-bind="scope" :index="scope.$index"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
|
||||
const props = defineProps({
|
||||
tableConfiger: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
controlsWidth: {
|
||||
type: Number,
|
||||
default: 180
|
||||
},
|
||||
tableHeight: {
|
||||
type: Number
|
||||
},
|
||||
treePros: {
|
||||
type: Object,
|
||||
default: {
|
||||
children: "children",
|
||||
hasChildren: "hasChildren"
|
||||
}
|
||||
},
|
||||
fixed: {
|
||||
type: String,
|
||||
default: "right"
|
||||
}
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const emit = defineEmits(["chooseData"]);
|
||||
const multipleTableRef = ref();
|
||||
const currentRow = ref();
|
||||
let getConfiger = reactive({
|
||||
showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
|
||||
showIndex: true, // 是否显示索引
|
||||
rowKey: null, // 如果是树形表格必须设置rowKey
|
||||
border: true, // 是否显示边框
|
||||
defaultExpandAll: false, // 是否展开全部
|
||||
loading: false,
|
||||
align: "center", // 列的对齐方式 left / center / right
|
||||
haveControls: true, // 是否有操作列
|
||||
controls: "操作", // 操作列的表头
|
||||
stripe: false, // 是否有斑马线
|
||||
lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置 hasChildren: true,才会显示展开icon
|
||||
portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
|
||||
defaultSelectKeys: [], // 默认选中的key集合
|
||||
radioChoose: "", // 单选时选中的值------------- 待完成
|
||||
rowHeight: "41" // 每行的高度
|
||||
});
|
||||
watchEffect(() => {
|
||||
getConfiger = { ...getConfiger, ...props.tableConfiger };
|
||||
console.log(getConfiger,'getConfiger');
|
||||
|
||||
setDefaultChoose();
|
||||
});
|
||||
onMounted(() => {
|
||||
setDefaultChoose();
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
emit("chooseData", val);
|
||||
};
|
||||
// 单选的时候选择的数据
|
||||
const handleCurrentChange = (val) => {
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
};
|
||||
const singleElection = (val) => {
|
||||
if (getConfiger.showSelectType === "radio") {
|
||||
getConfiger.radioChoose = val[getConfiger.rowKey];
|
||||
emit("chooseData", val);
|
||||
}
|
||||
};
|
||||
// 懒加载数据的方法
|
||||
const load = (date, treeNode, resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
id: 31,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
};
|
||||
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
|
||||
function setDefaultChoose() {
|
||||
nextTick(() => {
|
||||
// 多选的默认选中
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "checkBox"
|
||||
) {
|
||||
props.tableData.forEach((item) => {
|
||||
if (
|
||||
props.tableConfiger.defaultSelectKeys.findIndex(
|
||||
(v) => v === item[props.tableConfiger.rowKey]
|
||||
) > -1
|
||||
) {
|
||||
multipleTableRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
// 单选的默认选中
|
||||
} else if (
|
||||
props.tableConfiger.defaultSelectKeys &&
|
||||
props.tableConfiger.defaultSelectKeys?.length > 0 &&
|
||||
props.tableConfiger.showSelectType === "radio"
|
||||
) {
|
||||
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
</style>
|
||||
53
src/components/aboutTable/PageTitle.vue
Normal file
53
src/components/aboutTable/PageTitle.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="pageTitle" :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
|
||||
<div class="title">
|
||||
<div class="font">{{ title }}</div>
|
||||
</div>
|
||||
<div class="cnetr">
|
||||
<slot name="center"></slot>
|
||||
</div>
|
||||
<div class="right">
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
marginBottom: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "rgb(255, 255, 255, 0)"
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang = "scss" scoped>
|
||||
.pageTitle {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 52px;
|
||||
.title {
|
||||
display: flex;
|
||||
margin: auto 0;
|
||||
.icon {
|
||||
margin: auto 0;
|
||||
}
|
||||
.font {
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/components/aboutTable/Pages.vue
Normal file
91
src/components/aboutTable/Pages.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: 表格分页
|
||||
* @Date: 2023-10-20 09:34:38
|
||||
* @LastEditTime: 2023-11-13 18:34:05
|
||||
* @LastEditors: your name
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \project\src\components\aboutTable\Pages\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
:current-page="
|
||||
pageData.configer.currentPage ||
|
||||
pageData.configer.pageNo ||
|
||||
pageData.configer.current ||
|
||||
pageData.configer.pageCurrent ||
|
||||
pageData.configer.pageNum"
|
||||
:page-size="pageData.configer.pageSize || pageData.configer.size"
|
||||
:page-sizes="pageSizeArr"
|
||||
:small="small"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageData.configer.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watchEffect } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
pageSizeArr: {
|
||||
type: Array,
|
||||
default: () => [10, 20, 50, 100]
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
marginTop: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
tableHeight: {
|
||||
type: Number
|
||||
},
|
||||
pageConfiger: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
const pageData = reactive({
|
||||
configer: {}
|
||||
});
|
||||
const emit = defineEmits(["changeSize", "changeNo"]);
|
||||
// 改变每页条数
|
||||
const handleSizeChange = (val) => {
|
||||
emit("changeSize", val);
|
||||
};
|
||||
// 翻页
|
||||
const handleCurrentChange = (val) => {
|
||||
emit("changeNo", val);
|
||||
};
|
||||
watchEffect(() => {
|
||||
pageData.configer = props.pageConfiger;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination.is-background .btn-next, ::v-deep .el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .el-pager li{
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
575
src/components/aboutTable/Search.vue
Normal file
575
src/components/aboutTable/Search.vue
Normal file
@ -0,0 +1,575 @@
|
||||
<template>
|
||||
<div v-loading="loadingPage" class="pageSearch searchBox"
|
||||
:style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
|
||||
<div class="box">
|
||||
<div v-for="(item, index) in getArr" :key="index" class="item">
|
||||
<div class="label" v-if="item.label">{{ item.label }}</div>
|
||||
<!-- select -->
|
||||
<el-select v-if="item.showType === 'select'" v-model="searchObj[item.prop]" :multiple="item.multiple"
|
||||
:clearable="item.clearable" :filterable="item.filterable" :placeholder="item.placeholder" collapse-tags
|
||||
collapse-tags-tooltip>
|
||||
<el-option v-for="obj in getOptions[item.prop]" :key="obj.value" :label="obj.label || obj.lable"
|
||||
:value="obj.value" />
|
||||
</el-select>
|
||||
<!-- input -->
|
||||
<el-input v-else-if="item.showType === 'input'" class="input" v-model="searchObj[item.prop]"
|
||||
:clearable="item.clearable" :placeholder="item.placeholder" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.showType === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
|
||||
unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
|
||||
:end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" :disabledDate="disabledDate"
|
||||
value-format="YYYY-MM-DD" />
|
||||
<!-- 日期段选择器 -->
|
||||
<el-date-picker v-else-if="item.showType === 'datetimerange'" v-model="searchObj[item.prop]"
|
||||
type="datetimerange" unlink-panels :range-separator="item.rangeSeparator"
|
||||
:start-placeholder="item.startPlaceholder" :end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts"
|
||||
:disabledDate="disabledDate" value-format="YYYY-MM-DD HH:mm:ss" />
|
||||
<el-date-picker v-else-if="item.showType === 'date'" v-model="searchObj[item.prop]" type="date"
|
||||
:placeholder="item.placeholder" :disabled-date="disabledDate" :shortcuts="item.shortcuts"
|
||||
value-format="YYYY-MM-DD">
|
||||
</el-date-picker>
|
||||
|
||||
<template v-else-if="item.showType === 'department'">
|
||||
<MOSTY.Department clearable v-model="searchObj[item.prop]" />
|
||||
</template>
|
||||
<!-- checkbox -->
|
||||
<template v-else-if="item.showType === 'checkbox'">
|
||||
<el-checkbox v-if="item.showSelectAll" v-model="item.checkAll" :indeterminate="item.isIndeterminate"
|
||||
@change="(val) => { handleCheckAllChange(val, item); }">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="searchObj[item.prop]"
|
||||
@change="(val) => { handleCheckedCitiesChange(val, item); }">
|
||||
<el-checkbox v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- radio -->
|
||||
<el-radio-group v-else-if="item.showType === 'radio'" v-model="searchObj[item.prop]"
|
||||
@change="(val) => { handleRadioChange(val, item); }">
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 级联选择 -->
|
||||
<el-cascader v-else-if="item.showType === 'cascader'" @change="changeca" v-model="searchObj[item.prop]"
|
||||
:props="item.props" :show-all-levels="item.showAllLevels" :clearable="item.clearable"
|
||||
:options="getOptions[item.prop]" :placeholder="item.placeholder" />
|
||||
<div v-else-if="item.showType === 'defaultSlot'">
|
||||
<slot name="defaultSlot"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="butBox">
|
||||
<el-button type="primary" @click="submit">确定</el-button>
|
||||
<el-button type="" @click="reset">重置</el-button>
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, watchEffect, nextTick, getCurrentInstance, toRefs } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
searchArr: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{
|
||||
showType: "select",
|
||||
prop: "selectKey",
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: "选择1"
|
||||
}
|
||||
],
|
||||
defaultVal: "",
|
||||
label: "选择",
|
||||
dict: "" // 字典编码
|
||||
},
|
||||
{
|
||||
showType: "input",
|
||||
prop: "inputKey",
|
||||
defaultVal: "",
|
||||
label: "输入"
|
||||
},
|
||||
{
|
||||
showType: "daterange",
|
||||
prop: "daterangeKey",
|
||||
defaultVal: "",
|
||||
label: "输入"
|
||||
},
|
||||
{
|
||||
showType: "datetimerange",
|
||||
prop: "datetimerangeKey",
|
||||
defaultVal: "",
|
||||
label: "输入"
|
||||
},
|
||||
{
|
||||
showType: "date",
|
||||
prop: "date",
|
||||
defaultVal: ""
|
||||
},
|
||||
{
|
||||
showType: "checkbox",
|
||||
prop: "checkboxKey1",
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: "选择1"
|
||||
}
|
||||
],
|
||||
defaultVal: ""
|
||||
},
|
||||
{
|
||||
showType: "cascader",
|
||||
prop: "cascaderKey",
|
||||
label: "级联选择",
|
||||
checkStrictly: false, //点击任意选中
|
||||
defaultVal: ""
|
||||
},
|
||||
{
|
||||
showType: "radio",
|
||||
defaultVal: ""
|
||||
// prop: "cascaderKey",
|
||||
// label: "级联选择",
|
||||
// checkStrictly: false //点击任意选中
|
||||
},
|
||||
{
|
||||
showType: "defaultTime",
|
||||
prop: "timeField",
|
||||
options: [],
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
marginBottom: {
|
||||
type: Number,
|
||||
default: 15
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "rgb(255, 255, 255, 1)"
|
||||
}
|
||||
});
|
||||
let loadingPage = ref(false);
|
||||
const isShowDate = ref(false);
|
||||
const emit = defineEmits(["submit", "reset"]);
|
||||
let searchObj = reactive({});
|
||||
const timeConfig = reactive({ //时间字典筛选和自定义日期组件相关数据
|
||||
typeValue: "01", //时间字典类型默认
|
||||
timeArry: [], //时间筛选自定义默认值
|
||||
})
|
||||
//全所或自定义选择按钮
|
||||
const slectType = ref('qs');
|
||||
// select 的一些默认配置
|
||||
const selectDefault = {
|
||||
clearable: true, // 是否可以清空
|
||||
filterable: true, // 是否可以筛选
|
||||
multiple: false, // 是否多选
|
||||
placeholder: "请选择"
|
||||
};
|
||||
// 重新定义下拉框的选项
|
||||
let getOptions = reactive({});
|
||||
// input 的一些默认配置
|
||||
const inputDefault = {
|
||||
clearable: true, // 是否可以清空
|
||||
placeholder: "请输入"
|
||||
};
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "今天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
||||
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近7天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近30天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "最近90天",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
// daterange 的一些默认配置
|
||||
const daterangeDefault = {
|
||||
rangeSeparator: "至",
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
shortcuts: [], // 快捷选择
|
||||
defaultShortcuts: true // 是否显示快捷选择 如果要自定义快捷选择传入一个shortcuts就可以了
|
||||
};
|
||||
// date 的一些默认配置
|
||||
const defaultDate = {
|
||||
clearable: true, // 是否可以清空
|
||||
placeholder: "请输入",
|
||||
shortcuts: [], // 快捷选择
|
||||
defaultShortcuts: true // 是否显示快捷选择 如果要自定义快捷选择传入一个shortcuts就可以了
|
||||
};
|
||||
const dateShortcuts = [
|
||||
{
|
||||
text: "今天",
|
||||
value: new Date()
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "7天前",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "30天前",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return date;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "90天前",
|
||||
value: () => {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return date;
|
||||
}
|
||||
}
|
||||
];
|
||||
//自定义时间选择 item 配置项 value 选中的值
|
||||
const screenSelect = (item, value) => {
|
||||
if (value == "08") {
|
||||
searchObj[item.prop] = value;
|
||||
isShowDate.value = true;
|
||||
} else {
|
||||
timeConfig.typeValue = value;
|
||||
searchObj[item.prop] = value;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
//自定义时间确定时间
|
||||
const chooseDateOk = (item) => {
|
||||
timeConfig.typeValue = "08";
|
||||
if (timeConfig.timeArry && timeConfig.timeArry.length) { //选择了时间
|
||||
searchObj[item.propStart] = timeConfig.timeArry[0];
|
||||
searchObj[item.propEnd] = timeConfig.timeArry[1];
|
||||
} else { //清空了时间
|
||||
searchObj[item.prop] = "01";
|
||||
timeConfig.typeValue = "01";
|
||||
}
|
||||
isShowDate.value = false;
|
||||
submit();
|
||||
}
|
||||
//全所-部门选择回调
|
||||
const organizatioHland = (val) => {
|
||||
let item = getArr.find(item => item.showType == 'qsOrZdy');
|
||||
searchObj[item.propBm] = val?.data?.orgCode || "";
|
||||
if (!val || val == "") { //清空了部门选择后清空责任区ID
|
||||
slectType.value = "qs";
|
||||
delete searchObj[item.propZrq];
|
||||
}
|
||||
submit()
|
||||
};
|
||||
//全所-责任区回调
|
||||
const zrqHland = (val) => {
|
||||
let item = getArr.find(item => item.showType == 'qsOrZdy');
|
||||
searchObj[item.propZrq] = val || ""; //责任区选择
|
||||
submit();
|
||||
};
|
||||
//自定义时间取消事件
|
||||
const popoverCancel = (item) => {
|
||||
isShowDate.value = false;
|
||||
}
|
||||
// 设置不可选的日期
|
||||
const disabledDate = (time) => {
|
||||
return time.getTime() > Date.now();
|
||||
};
|
||||
// checkbox 的一些默认配置
|
||||
const defaultCheckbox = reactive({
|
||||
defaultVal: [],
|
||||
checkAll: false, // 全选的值
|
||||
isIndeterminate: false, // 控制全选按钮样式
|
||||
showSelectAll: true // 是否显示全选
|
||||
});
|
||||
// 全选复选框的选中与不选中
|
||||
const handleCheckAllChange = (val, obj) => {
|
||||
searchObj[obj.prop] = val ? obj.checkboxValueArr : [];
|
||||
obj.isIndeterminate = false;
|
||||
};
|
||||
// 单个复选框的选中与不选中
|
||||
const handleCheckedCitiesChange = (value, obj) => {
|
||||
const checkedCount = value.length;
|
||||
obj.checkAll = checkedCount === obj.checkboxValueArr.length;
|
||||
obj.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < obj.checkboxValueArr.length;
|
||||
};
|
||||
//单选
|
||||
const handleRadioChange = (val, obj) => {
|
||||
console.log(val, obj);
|
||||
};
|
||||
// cascader 的一些默认配置
|
||||
let defaultCascader = {
|
||||
filterable: true, // 是否可以搜索
|
||||
clearable: true, // 是否可以清空
|
||||
placeholder: "请选择",
|
||||
checkStrictly: true, // 控制是否父子联动（是否可以选择任意节点）
|
||||
showAllLevels: false, // 是否显示完整路径
|
||||
lazy: true, // 是否懒加载 当设置为false时就要传入options
|
||||
portUrl: "", // 这里必须写 接口地址
|
||||
props: {
|
||||
label: "label",
|
||||
value: "value",
|
||||
children: "children"
|
||||
},
|
||||
options: []
|
||||
};
|
||||
// 在懒加载状态下cascader 的props的一些配置
|
||||
const cascaderLazyProps = reactive({
|
||||
value: "value",
|
||||
label: "label",
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
// 这里要根据实际情况修改
|
||||
const { level } = node;
|
||||
let options = [];
|
||||
switch (level) {
|
||||
case 0:
|
||||
options = [
|
||||
{
|
||||
value: 1,
|
||||
label: "选择1",
|
||||
leaf: false // 表示有下一级 必须有这个表示 不然获取不到值
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "选择2",
|
||||
leaf: false // 表示有下一级
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "选择3",
|
||||
leaf: false // 表示有下一级
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: "选择4",
|
||||
leaf: true // 表示没有下一级了
|
||||
}
|
||||
];
|
||||
break;
|
||||
case 1:
|
||||
options = [
|
||||
{
|
||||
value: 11,
|
||||
label: "选择1_1",
|
||||
leaf: true // 表示没有下一级了
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: "选择2_1",
|
||||
leaf: true // 表示没有下一级了
|
||||
},
|
||||
{
|
||||
value: 31,
|
||||
label: "选择3_1",
|
||||
leaf: true // 表示没有下一级了
|
||||
},
|
||||
{
|
||||
value: 41,
|
||||
label: "选择4_1",
|
||||
leaf: true // 表示没有下一级了
|
||||
}
|
||||
];
|
||||
}
|
||||
resolve(options);
|
||||
}
|
||||
});
|
||||
// 级联框选择
|
||||
function changeca(v) {
|
||||
console.log("vvvv", v);
|
||||
}
|
||||
// 获取到传过来的参数
|
||||
let getArr = reactive([]);
|
||||
const submit = () => {
|
||||
emit("submit", searchObj);
|
||||
};
|
||||
const reset = () => {
|
||||
getArr.forEach((item) => {
|
||||
searchObj[item.prop] = item.defaultVal;
|
||||
});
|
||||
emit("submit", searchObj);
|
||||
emit("reset", false);
|
||||
};
|
||||
let dataOptions = reactive([]); //时间字典筛选
|
||||
watchEffect(() => {
|
||||
loadingPage.value = true;
|
||||
getArr = JSON.parse(JSON.stringify(props.searchArr));
|
||||
getArr = getArr.map((item) => {
|
||||
switch (item.showType) {
|
||||
case "select":
|
||||
item = { ...selectDefault, ...item };
|
||||
item.options = reactive(item.options);
|
||||
getOptions[item.prop] = item.options;
|
||||
break;
|
||||
case "input":
|
||||
item = { ...inputDefault, ...item };
|
||||
break;
|
||||
case "daterange":
|
||||
item = { ...daterangeDefault, ...item };
|
||||
if (item.defaultShortcuts) {
|
||||
item.shortcuts = shortcuts;
|
||||
}
|
||||
break;
|
||||
case "datetimerange":
|
||||
item = { ...daterangeDefault, ...item };
|
||||
if (item.defaultShortcuts) {
|
||||
item.shortcuts = shortcuts;
|
||||
}
|
||||
break;
|
||||
case "date":
|
||||
item = { ...defaultDate, ...item };
|
||||
if (item.defaultShortcuts) {
|
||||
item.shortcuts = dateShortcuts;
|
||||
}
|
||||
break;
|
||||
case "checkbox":
|
||||
item = reactive({ ...defaultCheckbox, ...item });
|
||||
item.checkboxValueArr = item.options.map((obj) => {
|
||||
return obj.value;
|
||||
});
|
||||
break;
|
||||
case "cascader":
|
||||
item = { ...defaultCascader, ...item };
|
||||
if (item.lazy) {
|
||||
cascaderLazyProps.checkStrictly = item.checkStrictly;
|
||||
item.props = { ...cascaderLazyProps, ...(item.props || {}) };
|
||||
delete item.options;
|
||||
} else {
|
||||
item.props = {
|
||||
...defaultCascader.props,
|
||||
...(item.props || {}),
|
||||
...{ checkStrictly: item.checkStrictly }
|
||||
};
|
||||
getOptions[item.prop] = reactive(item.options);
|
||||
}
|
||||
break;
|
||||
}
|
||||
loadingPage.value = false;
|
||||
searchObj[item.prop] = item.defaultVal;
|
||||
return item;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageSearch {
|
||||
margin-bottom: 15px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: auto;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.butBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.department_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
|
||||
.checkbox-box {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-radio {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default_time {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.but_type {
|
||||
background-color: #002961;
|
||||
border: 1px solid #23adf3;
|
||||
border-radius: 50px;
|
||||
color: #93a1ca;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
min-width: 90px;
|
||||
text-align: center;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.acavte_but {
|
||||
border: none;
|
||||
color: white;
|
||||
background: linear-gradient(#0d66dc 0%, #2dbbfa 100%);
|
||||
}
|
||||
|
||||
.picker-btn {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user