我的布控。四色预警

src/components/MyComponents/CheckBox/index.vue

@@ -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>

src/components/MyComponents/FormItem/index.vue

@@ -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>

src/components/MyComponents/RichOnly/index.vue

@@ -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>
-

src/components/MyComponents/index.js

@@ -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,