zhytech-ui-mobile 1.0.1 → 1.0.2

package/src/components/dynamicForm/components/application/employee.vue

@@ -0,0 +1,140 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\application\employee.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-06 14:20
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-03 16:50
+ * Description  : 人员(employee)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="zhy-form-component-employee">
+    <wd-radio-group
+      v-if="componentProps.type === 'radio'"
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :inline="!componentProps.newLine"
+      icon-placement="left"
+      shape="dot"
+    >
+      <wd-radio
+        v-for="(employee, index) in componentProps.options"
+        :key="index"
+        :value="employee.value"
+        @click="clearCheck($event, employee.value)"
+      >
+        {{ employee.label }}
+      </wd-radio>
+    </wd-radio-group>
+    <wd-checkbox-group
+      v-if="componentProps.type === 'checkbox'"
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :min="componentProps.min"
+      :max="componentProps.max"
+      :inline="!componentProps.newLine"
+    >
+      <wd-checkbox v-for="(employee, index) in componentProps.options" :key="index" :modelValue="employee.value" shape="square">
+        {{ employee.label }}
+      </wd-checkbox>
+    </wd-checkbox-group>
+    <wd-picker
+      v-if="componentProps.type === 'selector'"
+      custom-class="zhy"
+      v-model="employee.value"
+      :columns="componentProps.options"
+      :disabled="disabled"
+      use-default-slot
+      @confirm="confirm"
+    >
+      <wd-input custom-class="zhy" type="text" v-model="employee.label" :placeholder="`请选择${componentProps.label}`" readonly />
+    </wd-picker>
+    <view
+      v-if="showDescription && (formTypeEnum.Examination || componentProps.description)"
+      class="dynamic-form-item-description show-description"
+    >
+      <wd-icon custom-class="description-tip" class-prefix="iconfont zhy" name="tip" color="#ff0000" />
+      {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, editAttribute, employeeAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & employeeAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+watch(datas, (newValue) => emits("update:datas", newValue));
+const employee = ref<Record<string, string>>({});
+onMounted(async () => {
+  confirm(datas.value[props.componentID]);
+});
+/**
+ * @description: 选择人员
+ * @param value
+ * @return
+ */
+const confirm = (data: Record<string, any>) => {
+  employee.value = data?.selectedItems ?? {};
+  datas.value[props.componentID] = employee.value.value;
+};
+let oldValue: string | number | boolean | undefined = datas.value[props.componentID];
+/**
+ * @description: 清空选项检核
+ * @param event
+ * @param value
+ * @return
+ */
+const clearCheck = (event: any, value: string) => {
+  // 如果点击项目已选中，且允许取消，则取消选中
+  if (componentProps.value.clearable && oldValue === value) {
+    delete datas.value[props.componentID];
+    oldValue = undefined;
+    event.preventDefault();
+    return;
+  }
+  oldValue = value;
+};
+</script>

package/src/components/dynamicForm/components/application/grade.vue

@@ -0,0 +1,183 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\application\grade.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-06 14:20
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-03 16:58
+ * Description  : 考评分数(grade)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="zhy-form-component-grade">
+    <wd-radio-group
+      custom-class="zhy"
+      v-model="data.score"
+      :disabled="disabled"
+      :inline="!componentProps.newLine"
+      icon-placement="left"
+      shape="dot"
+    >
+      <wd-radio v-for="(gradeItem, index) in gradeItems" :key="index" :value="gradeItem.value" @click="clearCheck($event, gradeItem.value)">
+        {{ gradeItem.label }}
+      </wd-radio>
+    </wd-radio-group>
+    <view v-if="componentProps.showProblem" class="aline-left">
+      <text class="break-keep">问题：</text>
+      <wd-input
+        custom-class="zhy flex-auto"
+        type="text"
+        v-model="data.problem"
+        :disabled="disabled"
+        placeholder=""
+        :clearable="true"
+        clearTrigger="focus"
+      />
+    </view>
+    <view v-if="componentProps.showProblem" class="aline-left">
+      <text class="break-keep">亮点：</text>
+      <wd-input
+        custom-class="zhy flex-auto"
+        type="text"
+        v-model="data.brightSpot"
+        :disabled="disabled"
+        placeholder=""
+        :clearable="true"
+        clearTrigger="focus"
+      />
+    </view>
+    <view v-if="componentProps.showRemark" class="aline-left">
+      <text class="break-keep">备注：</text>
+      <wd-input
+        custom-class="zhy flex-auto"
+        type="text"
+        v-model="data.remark"
+        :disabled="disabled"
+        placeholder=""
+        :clearable="true"
+        clearTrigger="focus"
+      />
+    </view>
+    <view
+      v-if="showDescription && (formTypeEnum.Examination || componentProps.description)"
+      class="dynamic-form-item-description show-description"
+    >
+      <wd-icon custom-class="description-tip" class-prefix="iconfont zhy" name="tip" color="#ff0000" />
+      {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, editAttribute, gradeAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & gradeAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+watch(datas, (newValue) => emits("update:datas", newValue));
+const data = ref<Record<string, string>>(datas.value[props.componentID] || {});
+const { isEmpty } = useUtils();
+watch(
+  data,
+  (newValue) => {
+    let hasValue = false;
+    datas.value[props.componentID] = {};
+    Object.keys(newValue ?? {}).forEach((key) => {
+      if (!isEmpty(newValue[key])) {
+        datas.value[props.componentID][key] = newValue[key];
+        hasValue = true;
+      }
+    });
+    // 如果有有效值才添加maxScore
+    if (hasValue) {
+      datas.value[props.componentID].maxScore = componentProps.value.maxScore;
+    }
+  },
+  { deep: true }
+);
+const gradeItems = ref<Record<string, string>[]>([]);
+onMounted(() => getGradeItems());
+/**
+ * @description: 根据属性获取分数集合
+ */
+const getGradeItems = () => {
+  if (!componentProps.value.maxScore) {
+    return gradeItems;
+  }
+  // 依据配置显示单项否决项
+  if (componentProps.value.showVeto) {
+    gradeItems.value.push({ value: "-2", label: "单项否决" });
+  }
+  // 依据配置显示不考评选项
+  if (componentProps.value.showNotGrade) {
+    gradeItems.value.push({ value: "-1", label: "不考评" });
+  }
+  // 依据配置显示0分选项
+  if (componentProps.value.showZero) {
+    gradeItems.value.push({ value: "0", label: "0分" });
+  }
+  // 依据最大分数展开
+  let gradeScore = Number(componentProps.value.maxScore);
+  for (let i = 1; i <= gradeScore; i++) {
+    gradeItems.value.push({ value: String(i), label: `${String(i)}分` });
+  }
+  if (componentProps.value.scoreReverseFlag) {
+    gradeItems.value.reverse();
+  }
+};
+let oldValue: string | number | boolean | undefined = (datas.value[props.componentID] || {}).score;
+/**
+ * @description: 清空选项检核
+ * @param event
+ * @param value
+ * @return
+ */
+const clearCheck = (event: any, value: string) => {
+  // 如果点击项目已选中，且允许取消，则取消选中
+  if (componentProps.value.clearable && oldValue === value) {
+    delete datas.value[props.componentID].score;
+    oldValue = undefined;
+    event.preventDefault();
+    return;
+  }
+  oldValue = value;
+};
+</script>

package/src/components/dynamicForm/components/application/index.ts

@@ -0,0 +1,14 @@
+/*
+ * FilePath     : \src\components\dynamicForm\components\application\index.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 19:04
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-05-18 17:56
+ * Description  : 业务应用组件集合
+ * CodeIterationRecord:
+ */
+
+import employee from "./employee.vue";
+import grade from "./grade.vue";
+import post from "./post.vue";
+export { employee, grade, post };

package/src/components/dynamicForm/components/application/post.vue

@@ -0,0 +1,136 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\application\post.vue
+ * Author       : 郭鹏超
+ * Date         : 2024-04-22 11:12
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 10:08
+ * Description  :岗位(post)组件渲染器
+ * CodeIterationRecord:
+-->
+
+<template>
+  <view class="zhy-form-component-post">
+    <wd-radio-group
+      v-if="componentProps.type === 'radio'"
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :inline="!componentProps.newLine"
+      icon-placement="left"
+      shape="dot"
+    >
+      <wd-radio v-for="(post, index) in componentProps.options" :key="index" :value="post.value" @click="clearCheck($event, post.value)">
+        {{ post.label }}
+      </wd-radio>
+    </wd-radio-group>
+    <wd-checkbox-group
+      v-if="componentProps.type === 'checkbox'"
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :min="componentProps.min"
+      :max="componentProps.max"
+      :inline="!componentProps.newLine"
+    >
+      <wd-checkbox v-for="(post, index) in componentProps.options" :key="index" :modelValue="post.value" shape="square">
+        {{ post.label }}
+      </wd-checkbox>
+    </wd-checkbox-group>
+    <wd-picker
+      v-if="componentProps.type === 'selector'"
+      custom-class="zhy"
+      v-model="post.value"
+      :columns="componentProps.options"
+      :disabled="disabled"
+      use-default-slot
+      @confirm="confirm"
+    >
+      <wd-input custom-class="zhy" type="text" v-model="post.label" :placeholder="`请选择${componentProps.label}`" readonly />
+    </wd-picker>
+    <view
+      v-if="showDescription && (formTypeEnum.Examination || componentProps.description)"
+      class="dynamic-form-item-description show-description"
+    >
+      <wd-icon custom-class="description-tip" class-prefix="iconfont zhy" name="tip" color="#ff0000" />
+      {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum } from "../../types/enum";
+import type { baseAttribute, editAttribute, employeeAttribute, postAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & employeeAttribute & postAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+watch(datas, (newValue) => emits("update:datas", newValue));
+const post = ref<Record<string, string>>({});
+onMounted(async () => {
+  confirm(datas.value[props.componentID]);
+});
+/**
+ * @description: 选择岗位
+ * @param value
+ * @return
+ */
+const confirm = (data: Record<string, any>) => {
+  post.value = data?.selectedItems ?? {};
+  datas.value[props.componentID] = post.value.value;
+};
+let oldValue: string | number | boolean | undefined = datas.value[props.componentID];
+/**
+ * @description: 清空选项检核
+ * @param event
+ * @param value
+ * @return
+ */
+const clearCheck = (event: any, value: string) => {
+  // 如果点击项目已选中，且允许取消，则取消选中
+  if (componentProps.value.clearable && oldValue === value) {
+    delete datas.value[props.componentID];
+    oldValue = undefined;
+    event.preventDefault();
+    return;
+  }
+  oldValue = value;
+};
+</script>

package/src/components/dynamicForm/components/base/checkbox.vue

@@ -0,0 +1,143 @@
+<!--
+ * FilePath     : \src\components\dynamicForm\components\base\checkbox.vue
+ * Author       : 苏军志
+ * Date         : 2024-03-06 19:12
+ * LastEditors  : 苏军志
+ * LastEditTime : 2025-09-05 20:35
+ * Description  : 多选框(checkbox)组件渲染器
+ * CodeIterationRecord:
+ -->
+<template>
+  <view class="zhy-form-component-checkbox">
+    <wd-checkbox-group
+      custom-class="zhy"
+      v-model="datas[componentID]"
+      :disabled="disabled"
+      :min="componentProps.min"
+      :max="componentProps.max"
+      :inline="!componentProps.newLine"
+    >
+      <template v-for="(item, index) in componentProps.options" :key="index">
+        <wd-checkbox :modelValue="item.value" shape="square">{{ item.label }} </wd-checkbox>
+        <wd-input
+          v-if="item.inputEnable && datas[componentID]?.includes(item.value)"
+          custom-class="zhy ml-20!"
+          type="text"
+          placeholder=""
+          :clearable="true"
+          clearTrigger="focus"
+          v-model="datas[`${componentID}||${item.value}`]"
+        />
+      </template>
+    </wd-checkbox-group>
+    <view
+      v-if="
+        everyItemDisplayAnalysisSwitch ||
+        displayAnswerDescription ||
+        (showDescription && (formType === formTypeEnum.Examination || componentProps.description))
+      "
+      :class="['dynamic-form-item-description', { 'show-description': displayAnswerDescription }]"
+    >
+      <wd-icon
+        custom-class="description-tip"
+        class-prefix="iconfont zhy"
+        name="tip"
+        color="#ff0000"
+        @click="displayAnswerDescription = !displayAnswerDescription"
+      />
+      <view v-if="displayAnswerDescription">
+        {{ `${formType === formTypeEnum.Form ? "项目说明" : "答案解析"}：${componentProps.description || "无"}` }}</view
+      >
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { formTypeEnum, examinationStatusEnum } from "../../types/enum";
+import type { baseAttribute, checkboxAttribute, editAttribute } from "../../types/componentAttribute/index";
+type componentType = baseAttribute & editAttribute & checkboxAttribute;
+const props = defineProps({
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 组件ID
+   */
+  componentID: {
+    type: [String, Number],
+    required: true
+  },
+  /**
+   * 表单数据
+   */
+  datas: {
+    type: Object as PropType<Record<string, any>>,
+    required: true
+  },
+  /**
+   * 组件属性
+   */
+  componentProps: {
+    type: Object as PropType<componentType>,
+    required: true
+  },
+  /**
+   * 是否项目说明/答案解析
+   */
+  showDescription: {
+    type: Boolean,
+    default: false
+  }
+});
+// 表单类型
+const formType = inject("formType") as ComputedRef<string>;
+const realTimeDisplayAnswerMode = inject("realTimeDisplayAnswerMode") as boolean;
+const everyItemDisplayAnalysisSwitch = inject("everyItemDisplayAnalysisSwitch") as boolean;
+// 双向绑定
+const { datas, componentProps } = toRefs(props);
+const emits = defineEmits(["update:datas"]);
+const displayAnswerDescription = ref<boolean>(false);
+/**
+ * @description: 选项值改变，如果允许填空的选项被取消勾选，填空内容也清空
+ * @param values
+ * @return
+ */
+const change = (values: any) => {
+  // 如果是考试，并且打开了实时显示答案模式
+  if (
+    formType.value === formTypeEnum.Examination &&
+    realTimeDisplayAnswerMode &&
+    values?.length &&
+    componentProps.value.correctOptions?.length
+  ) {
+    const errorValue = values?.find((value: any) => !componentProps.value.correctOptions?.includes(value));
+    if (!errorValue && componentProps.value.correctOptions?.length === values.length) {
+      componentProps.value.examinationStatus = examinationStatusEnum.Correct;
+      componentProps.value.color = "#000000";
+      displayAnswerDescription.value = false;
+    } else {
+      componentProps.value.examinationStatus = examinationStatusEnum.Error;
+      componentProps.value.color = "#ff0000";
+      displayAnswerDescription.value = true;
+    }
+  }
+  // 如果取消选中的选项，清空输入框
+  componentProps.value.options.forEach((option) => {
+    const inputKey = `${props.componentID}||${option.value}`;
+    if (!(values ?? []).includes(option.value) && datas.value[inputKey]) {
+      delete datas.value[inputKey];
+    }
+  });
+};
+watch(
+  datas,
+  (newValue) => {
+    change(newValue?.[props.componentID]);
+    emits("update:datas", newValue);
+  },
+  { deep: true, immediate: true }
+);
+</script>

package/src/components/dynamicForm/components/base/index.ts

@@ -0,0 +1,15 @@
+/*
+ * FilePath     : \src\components\dynamicForm\components\base\index.ts
+ * Author       : 苏军志
+ * Date         : 2024-03-04 19:04
+ * LastEditors  : 苏军志
+ * LastEditTime : 2024-05-18 17:31
+ * Description  : 基础组件集合
+ * CodeIterationRecord:
+ */
+
+import checkbox from "./checkbox.vue";
+import input from "./input.vue";
+import label from "./label.vue";
+import radio from "./radio.vue";
+export { label, input, radio, checkbox };