zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的布控。四色预警

Browse Source
This commit is contained in:
给我
2025-04-12 23:51:24 +08:00
parent a2e89f5ea1
commit 3754b9c5ed
21 changed files with 2238 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/MyComponents/CheckBox/index.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="form-item-box" :style="{ width: width }">
<el-checkbox-group v-model="modelValue" @change="handleCheckAllChange">
<el-checkbox
v-for="item in checkList"
:key="item.value"
:label="item.value"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</template>
<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
const props = defineProps({
//获取组件传值
placeholder: {
default: "请填写手机号",
type: String
},
modelValue: {
default: [],
type: Array
},
width: {
default: COMPONENT_WIDTH,
type: String
},
// 绑定的prop
checkList: {
default: "",
type: String
}
});
watch(
() => props.modelValue,
(val) => {
console.log(val, "val");
},
{ deep: true }
);
const emits = defineEmits(["update:modelValue"]);
const handleCheckAllChange = (e) => {
emits("update:modelValue", e);
};
</script>

141
src/components/MyComponents/FormItem/index.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<el-form
ref="elform"
:model="listQuery"
:label-width="140"
:rules="props.rules"
:inline="true"
label-position="right"
>
<el-form-item
:style="{ width: item.width }"
:prop="item.prop"
:label="item.text"
:label-width="item.labelWidth"
v-for="item in props.formData"
:key="item"
>
<MOSTY.Other
v-if="item.type == 'input'"
width="100%"
clearable
v-model="listQuery[item.prop]"
:placeholder="`请输入${item.text}`"
/>
<el-input
v-model="listQuery[item.prop]"
v-else-if="item.type == 'textarea'"
:placeholder="`请输入${item.text}`"
/>
<MOSTY.Select
v-else-if="item.type == 'select'"
width="100%"
clearable
v-model="listQuery[item.prop]"
:dictEnum="item.optionList"
:placeholder="`请选择${item.text}`"
/>
<MOSTY.Upload
v-else-if="item.type == 'upload'"
width="100%"
v-model="listQuery[item.prop]"
/>
<MOSTY.CheckBox
v-else-if="item.type == 'checkbox'"
width="100%"
clearable
v-model="listQuery[item.prop]"
:checkList="item.optionList"
:placeholder="`请选择${item.text}`"
/>
<el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'">
<el-radio
v-for="obj in item.optionList"
:key="obj.value"
:label="obj.value"
>{{ obj.label }}</el-radio
>
</el-radio-group>
<el-date-picker
v-else-if="item.type == 'date'"
v-model="listQuery[item.prop]"
type="date"
value-format="YYYY-MM-DD"
:placeholder="请选择时间"
/>
<el-date-picker
v-else-if="item.type == 'datetime'"
v-model="listQuery[item.prop]"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:placeholder="请选择时间"
/>
<el-date-picker
v-else-if="item.type == 'datetimerange'"
v-model="listQuery[item.prop]"
type="datetimerange"
:shortcuts="shortcuts"
range-separator="To"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="选择开始时间"
end-placeholder="选择结束时间"
/>
<el-date-picker
v-else-if="item.type == 'daterange'"
v-model="listQuery[item.prop]"
type="daterange"
range-separator="To"
value-format="YYYY-MM-DD"
start-placeholder="选择开始日期"
end-placeholder="选择开始日期"
/>
<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"
/>
<template v-else-if="item.type === 'slot'">
<slot :name="item.prop"></slot>
</template>
</el-form-item>
</el-form>
</template>
<script setup>
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, defineExpose } from "vue";
const props = defineProps({
//循环的值
formData: {
default: [],
type: Array
},
modelKey: {
default: {},
type: Object
},
// 绑定的prop
propName: {
default: "",
type: String
},
rules: {
default: {},
type: Object
}
});
const elform = ref();
const listQuery = ref({});
const emits = defineEmits(["update:modelValue"]);
const onInput = (e) => {
emits("update:modelValue", e);
};
const submit = (resfun) => {
elform.value.validate((valid) => {
if (!valid) return false;
resfun(listQuery.value);
});
};
defineExpose({ submit });
</script>

11
src/components/MyComponents/RichOnly/index.vue
View File

@ -277,12 +277,11 @@ watch(
display: none;
}
</style>
<style lang="scss" >
<style lang="scss">
.el-dialog {
--el-dialog-bg-color: #001238 !important;
}
.el-dialog__title {
color: #fff !important;
// --el-dialog-bg-color: #fff !important;
}
// .el-dialog__title {
// color: #fff !important;
// }
</style>

4
src/components/MyComponents/index.js
View File

@ -5,8 +5,10 @@ import Phone from "./Phone/index.vue";
import IdentityCard from "./IdentityCard/index.vue";
import Email from "./Email/index.vue";
import Other from "./Other/index.vue";
import FormItem from "./FormItem/index.vue";
import Sex from "./Sex/index.vue";
import Select from "./Select/index.vue";
import CheckBox from "./CheckBox/index.vue";
import Upload from "./Upload/index.vue";
import Department from "./Department/index.vue";
import DepartmentTree from "./DepartmentTree/index.vue";
@ -26,7 +28,9 @@ export {
Other,
Sex,
Select,
CheckBox,
Upload,
FormItem,
FrameWork2,
Department,
DepartmentTree,

88
src/components/aboutTable/Search.vue
View File

@ -56,10 +56,10 @@
value-format="YYYY-MM-DD"
>
</el-date-picker>
<!-- checkbox -->
<template v-else-if="item.showType === 'department'">
<MOSTY.Department clearable v-model="item.ssbmdm" />
<MOSTY.Department clearable v-model="item.ssbmdm" />
</template>
<!-- checkbox -->
<template v-else-if="item.showType === 'checkbox'">
@ -67,11 +67,21 @@
v-if="item.showSelectAll"
v-model="item.checkAll"
:indeterminate="item.isIndeterminate"
@change=" (val) => { handleCheckAllChange(val, item); }"
>全选</el-checkbox>
@change="
(val) => {
handleCheckAllChange(val, item);
}
"
>全选</el-checkbox
>
<el-checkbox-group
v-model="searchObj[item.prop]"
@change=" (val) => { handleCheckedCitiesChange(val, item); }" >
@change="
(val) => {
handleCheckedCitiesChange(val, item);
}
"
>
<el-checkbox
v-for="obj in item.options"
:key="obj.value"
@ -84,7 +94,12 @@
<el-radio-group
v-else-if="item.showType === 'radio'"
v-model="searchObj[item.prop]"
@change="(val) => { handleRadioChange(val, item);}">
@change="
(val) => {
handleRadioChange(val, item);
}
"
>
<el-radio
v-for="obj in item.options"
:key="obj.value"
@ -118,7 +133,15 @@
</template>
<script setup>
import { ref, reactive, watch, watchEffect, nextTick, getCurrentInstance, toRefs } from "vue";
import {
ref,
reactive,
watch,
watchEffect,
nextTick,
getCurrentInstance,
toRefs
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const props = defineProps({
@ -184,7 +207,7 @@ const props = defineProps({
{
showType: "defaultTime",
prop: "timeField",
options: [],
options: []
}
];
}
@ -202,12 +225,13 @@ let loadingPage = ref(false);
const isShowDate = ref(false);
const emit = defineEmits(["submit", "reset"]);
let searchObj = reactive({});
const timeConfig = reactive({ //时间字典筛选和自定义日期组件相关数据
typeValue:"01", //时间字典类型默认
timeArry:[], //时间筛选自定义默认值
})
const timeConfig = reactive({
//时间字典筛选和自定义日期组件相关数据
typeValue: "01", //时间字典类型默认
timeArry: [] //时间筛选自定义默认值
});
//全所或自定义选择按钮
const slectType = ref('qs');
const slectType = ref("qs");
// select 的一些默认配置
const selectDefault = {
clearable: true, // 是否可以清空
@ -324,49 +348,52 @@ const dateShortcuts = [
}
];
//自定义时间选择 item 配置项 value 选中的值
const screenSelect = (item,value) => {
if(value == "08"){
const screenSelect = (item, value) => {
if (value == "08") {
searchObj[item.prop] = value;
isShowDate.value = true;
}else{
} else {
timeConfig.typeValue = value;
searchObj[item.prop] = value;
submit();
}
}
};
//自定义时间确定时间
const chooseDateOk = (item) => {
timeConfig.typeValue = "08";
if(timeConfig.timeArry && timeConfig.timeArry.length){ //选择了时间
if (timeConfig.timeArry && timeConfig.timeArry.length) {
//选择了时间
searchObj[item.propStart] = timeConfig.timeArry[0];
searchObj[item.propEnd] = timeConfig.timeArry[1];
}else{ //清空了时间
} else {
//清空了时间
searchObj[item.prop] = "01";
timeConfig.typeValue = "01";
}
isShowDate.value = false;
submit();
}
};
//全所-部门选择回调
const organizatioHland = (val) => {
let item = getArr.find(item=>item.showType == 'qsOrZdy');
let item = getArr.find((item) => item.showType == "qsOrZdy");
searchObj[item.propBm] = val?.data?.orgCode || "";
if (!val || val == "") { //清空了部门选择后清空责任区ID
if (!val || val == "") {
//清空了部门选择后清空责任区ID
slectType.value = "qs";
delete searchObj[item.propZrq];
}
submit()
submit();
};
//全所-责任区回调
const zrqHland = (val) => {
let item = getArr.find(item=>item.showType == 'qsOrZdy');
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();
@ -482,7 +509,7 @@ const submit = () => {
};
const reset = () => {
getArr.forEach((item) => {
searchObj[item.prop] = item.defaultVal ;
searchObj[item.prop] = item.defaultVal;
});
emit("submit", searchObj);
emit("reset", false);
@ -536,13 +563,13 @@ watchEffect(() => {
break;
}
loadingPage.value = false;
searchObj[item.prop] = item.defaultVal ;
searchObj[item.prop] = item.defaultVal;
return item;
});
});
</script>
<style lang = "scss" scoped>
<style lang="scss" scoped>
.pageSearch {
.box {
display: flex;
@ -560,5 +587,4 @@ watchEffect(() => {
}
}
}
</style>
</style>