yg-yygl 0.0.1

package/dist/views/sys/app-menu/application/app-form.vue.d.ts

@@ -0,0 +1,35 @@
+interface AppForm {
+    id?: string;
+    appName: string;
+    appCode: string;
+    icon: string;
+    url: string;
+    authSecret: string;
+    appType: number;
+    mobileApplication: number;
+    sort: number;
+    status: number;
+    description?: string;
+    accountSyncUrl?: string;
+    roleSyncUrl?: string;
+    orgSyncUrl?: string;
+    extendValues?: any[];
+}
+type __VLS_Props = {
+    formData: Partial<AppForm>;
+    expandFields?: any[];
+    type?: 'add' | 'edit' | 'view';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    resetForm: () => void;
+    submitForm: () => Promise<boolean>;
+    getFormData: () => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    submit: (data: AppForm) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((data: AppForm) => any) | undefined;
+}>, {
+    type: "add" | "edit" | "view";
+    expandFields: any[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/sys/app-menu/application/application-extend-manage.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/app-menu/application/application-extend-manage.vue

@@ -0,0 +1,596 @@
+<script setup lang="ts">
+import type { ApplicationExtendFormData } from '../../../../api/app-menu/types';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Dialog, Form, IconButton, Table, useTable } from '@udp/component-ui';
+import type { FormItemConfig } from '@udp/component-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import {
+  createApplicationExtend,
+  deleteApplicationExtend,
+  getApplicationExtendList,
+  updateApplicationExtend,
+} from '../../../../api/app-menu';
+
+const emit = defineEmits(['refresh']);
+
+// 字段类型映射
+const fieldTypeMap = {
+  INPUT: '输入框',
+  SELECT: '下拉框',
+  RADIO: '单选框',
+  CHECKBOX: '复选框',
+};
+
+// 列表配置
+const columns = [
+  { prop: 'fieldType', label: '输入类型', minWidth: 80, slot: 'fieldType' },
+  { prop: 'fieldName', label: '属性名称', minWidth: 80 },
+  {
+    prop: 'fieldOption',
+    label: '选项',
+    minWidth: 150,
+    showOverflowTooltip: true,
+    slot: 'fieldOption',
+  },
+  { prop: 'isShow', label: '是否显示', minWidth: 80, slot: 'isShow' },
+];
+
+// API配置
+const api = {
+  list: getApplicationExtendList,
+  delete: (id: string) => deleteApplicationExtend({ id }),
+};
+
+// 使用Hook
+const { loading, data, refresh, pagination } = useTable({
+  api,
+  initParams: {},
+});
+
+// 弹窗状态
+const dialogVisible = ref(false);
+const isEdit = ref(false);
+const submitLoading = ref(false);
+const formRef = ref();
+// 选项表单引用
+const optionsFormRef = ref();
+
+// 表单数据
+const formData = ref<ApplicationExtendFormData>({
+  fieldName: '',
+  fieldType: '',
+  fieldOption: '',
+  isShow: 1,
+});
+
+// 选项配置列表
+const optionsList = ref<Array<{ name: string; value: string }>>([]);
+
+// 选项校验规则
+const optionRules = {
+  name: [{ required: true, message: '请输入属性名', trigger: 'blur' }],
+  value: [{ required: true, message: '请输入属性值', trigger: 'blur' }],
+};
+
+// 表单验证规则
+const formRules = {
+  fieldName: [
+    { required: true, message: '请输入属性名称', trigger: 'blur' },
+    {
+      min: 2,
+      max: 50,
+      message: '属性名称长度应在 2-50 个字符',
+      trigger: 'blur',
+    },
+  ],
+  fieldType: [{ required: true, message: '请选择输入类型', trigger: 'change' }],
+  fieldOption: [
+    {
+      validator: (_rule: any, _value: string, callback: Function) => {
+        if (
+          ['CHECKBOX', 'RADIO', 'SELECT'].includes(formData.value.fieldType)
+        ) {
+          // 检查optionsList是否有有效的选项配置
+          const hasValidOptions = optionsList.value.some((option) =>
+            option.name.trim(),
+          );
+          if (hasValidOptions) {
+            callback();
+          } else {
+            callback(new Error('该输入类型必须配置选项'));
+          }
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+};
+
+// 使用封装 Form 的 items 配置
+const formItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'fieldName',
+    label: '属性名称',
+    type: 'input',
+    required: true,
+    rules: formRules.fieldName,
+    props: { placeholder: '请输入属性名称', maxlength: 50 },
+  },
+  {
+    prop: 'fieldType',
+    label: '输入类型',
+    type: 'select',
+    required: true,
+    rules: formRules.fieldType,
+    options: [
+      { label: '输入框', value: 'INPUT' },
+      { label: '下拉框', value: 'SELECT' },
+      { label: '单选框', value: 'RADIO' },
+      { label: '复选框', value: 'CHECKBOX' },
+    ],
+    props: {
+      placeholder: '请选择输入类型',
+      disabled: isEdit.value,
+    },
+  },
+  {
+    prop: 'fieldOption',
+    label: '选项配置',
+    slot: 'optionsConfig',
+    rules: formRules.fieldOption,
+    condition: (values: any) =>
+      ['SELECT', 'RADIO', 'CHECKBOX'].includes(values.fieldType),
+  },
+  {
+    prop: 'isShow',
+    label: '是否显示',
+    type: 'switch',
+    props: { activeValue: 1, inactiveValue: 0 },
+  },
+]);
+
+// 新增
+const handleAdd = () => {
+  isEdit.value = false;
+  resetForm();
+  dialogVisible.value = true;
+};
+
+// 编辑
+const handleEdit = (row: any) => {
+  isEdit.value = true;
+  Object.assign(formData.value, row);
+  // 解析选项数据到选项列表
+  if (
+    ['CHECKBOX', 'RADIO', 'SELECT'].includes(row.fieldType) &&
+    row.fieldOption
+  ) {
+    parseOptionsToList(row.fieldOption);
+  } else {
+    optionsList.value = [];
+  }
+  dialogVisible.value = true;
+};
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    // 1. 主表单校验
+    const mainValid = await formRef.value?.validate();
+    if (!mainValid) return;
+
+    // 2. 选项表单校验（仅当需要选项时）
+    if (['CHECKBOX', 'RADIO', 'SELECT'].includes(formData.value.fieldType)) {
+      try {
+        await optionsFormRef.value?.validate();
+      } catch {
+        return; // 选项校验失败，阻止提交
+      }
+    }
+
+    submitLoading.value = true;
+
+    // 同步选项列表到fieldOption
+    if (['CHECKBOX', 'RADIO', 'SELECT'].includes(formData.value.fieldType)) {
+      syncOptionsToField();
+    }
+
+    // 准备提交数据
+    const submitData = { ...formData.value };
+
+    // 调用API
+    await (isEdit.value
+      ? updateApplicationExtend(submitData)
+      : createApplicationExtend(submitData));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    dialogVisible.value = false;
+    refresh();
+    emit('refresh');
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败，请重试');
+  } finally {
+    submitLoading.value = false;
+  }
+};
+
+// 字段类型变化
+const handleFieldTypeChange = () => {
+  if (['CHECKBOX', 'RADIO', 'SELECT'].includes(formData.value.fieldType)) {
+    // 如果切换到需要选项的类型，初始化一个空选项
+    if (optionsList.value.length === 0) {
+      optionsList.value = [{ name: '', value: '' }];
+    }
+  } else {
+    formData.value.fieldOption = '';
+    optionsList.value = [];
+  }
+};
+
+// 关闭弹窗
+const handleDialogClose = () => {
+  dialogVisible.value = false;
+  resetForm();
+};
+
+// 解析选项配置
+const parseOptions = (optionsStr: string) => {
+  try {
+    // 如果是JSON格式，直接解析
+    return JSON.parse(optionsStr);
+  } catch {
+    // 如果不是JSON，按行分割处理
+    return optionsStr
+      .split('\n')
+      .filter((line) => line.trim())
+      .map((line) => {
+        const [label, value] = line.split(':');
+        return {
+          label: label?.trim() || '',
+          value: value ? value.trim() : label?.trim() || '',
+        };
+      });
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  Object.assign(formData.value, {
+    id: undefined,
+    fieldName: '',
+    fieldType: '',
+    fieldOption: '',
+    isShow: 1,
+  });
+  optionsList.value = [];
+  formRef.value?.clearValidate();
+  optionsFormRef.value?.clearValidate();
+};
+
+// 添加选项
+const addOption = () => {
+  optionsList.value.push({ name: '', value: '' });
+};
+
+// 删除选项
+const removeOption = (index: number) => {
+  optionsList.value.splice(index, 1);
+};
+
+// 同步选项列表到fieldOption
+const syncOptionsToField = () => {
+  const options = optionsList.value
+    .filter((option) => option.name.trim())
+    .map((option) => ({
+      label: option.name.trim(),
+      value: option.value.trim() || option.name.trim(),
+    }));
+  formData.value.fieldOption = JSON.stringify(options);
+};
+
+// 从fieldOption解析到选项列表
+const parseOptionsToList = (optionsStr: string) => {
+  if (!optionsStr) {
+    optionsList.value = [];
+    return;
+  }
+
+  try {
+    const options = JSON.parse(optionsStr);
+    optionsList.value = options.map((option: any) => ({
+      name: option.label || option.name || '',
+      value: option.value || '',
+    }));
+  } catch {
+    // 如果不是JSON，按行分割处理
+    optionsList.value = optionsStr
+      .split('\n')
+      .filter((line) => line.trim())
+      .map((line) => {
+        const [name, value] = line.split(':');
+        return {
+          name: name?.trim() || '',
+          value: value ? value.trim() : name?.trim() || '',
+        };
+      });
+  }
+};
+
+// 自定义删除方法
+const customDeleteRow = async (row: any) => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要删除这条数据吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    await deleteApplicationExtend({ id: row.id });
+    ElMessage.success('删除成功');
+
+    // 如果当前页只有一条数据且不是第一页，则跳转到上一页
+    if (data.value.length === 1 && pagination.currentPage > 1) {
+      pagination.currentPage--;
+    }
+
+    await refresh();
+    emit('refresh');
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
+};
+
+onMounted(() => {
+  refresh();
+});
+</script>
+
+<template>
+  <div class="extend-manage flex h-full w-full flex-col overflow-hidden">
+    <div class="mb-4">
+      <IconButton type="primary" icon-type="add" @click="handleAdd">
+        新增扩展属性
+      </IconButton>
+    </div>
+
+    <Table
+      class="w-full flex-1"
+      :data="data"
+      :columns="columns"
+      :loading="loading"
+      show-action
+      action-width="120px"
+      @refresh="refresh"
+      :on-edit="handleEdit"
+      :on-delete="customDeleteRow"
+    >
+      <template #fieldType="{ row }">
+        <span>{{
+          fieldTypeMap[row.fieldType as keyof typeof fieldTypeMap] ||
+          row.fieldType
+        }}</span>
+      </template>
+
+      <template #fieldOption="{ row }">
+        <div
+          v-if="
+            ['SELECT', 'RADIO', 'CHECKBOX'].includes(row.fieldType) &&
+            row.fieldOption
+          "
+          class="flex flex-wrap gap-1"
+        >
+          <el-tag
+            v-for="(option, index) in parseOptions(row.fieldOption)"
+            :key="index"
+            size="small"
+            type="info"
+          >
+            {{ option.label }}
+          </el-tag>
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+
+      <template #isShow="{ row }">
+        <el-tag :type="row.isShow === 1 ? 'success' : 'danger'" size="small">
+          {{ row.isShow === 1 ? '是' : '否' }}
+        </el-tag>
+      </template>
+    </Table>
+
+    <!-- 新增/编辑弹窗（使用封装的 Dialog + Form） -->
+    <Dialog
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑扩展属性' : '新增扩展属性'"
+      :type="isEdit ? 'edit' : 'add'"
+      width="700px"
+      @close="handleDialogClose"
+      @confirm="handleSubmit"
+      :confirm-loading="submitLoading"
+      :show-cancel-button="true"
+      :show-confirm-button="true"
+      confirm-text="确认"
+      cancel-text="取消"
+    >
+      <Form
+        ref="formRef"
+        v-model="formData"
+        :items="formItems"
+        :form-props="{ labelWidth: '80px' }"
+        :show-actions="false"
+        @field-change="
+          (prop: string) => {
+            if (prop === 'fieldType') handleFieldTypeChange();
+          }
+        "
+      >
+        <template #optionsConfig>
+          <div class="options-config">
+            <!-- 嵌套 el-form 用于选项校验 -->
+            <el-form
+              ref="optionsFormRef"
+              :model="{ options: optionsList }"
+              class="options-form"
+            >
+              <div
+                v-for="(option, index) in optionsList"
+                :key="index"
+                class="option-row"
+              >
+                <div class="option-index">{{ index + 1 }}</div>
+
+                <el-form-item
+                  :prop="`options.${index}.name`"
+                  :rules="optionRules.name"
+                  class="option-form-item"
+                >
+                  <el-input
+                    v-model="option.name"
+                    placeholder="请输入属性名"
+                    :disabled="isEdit"
+                    size="small"
+                  />
+                </el-form-item>
+
+                <el-form-item
+                  :prop="`options.${index}.value`"
+                  :rules="optionRules.value"
+                  class="option-form-item"
+                >
+                  <el-input
+                    v-model="option.value"
+                    placeholder="请输入属性值"
+                    :disabled="isEdit"
+                    size="small"
+                  />
+                </el-form-item>
+
+                <div class="option-actions">
+                  <el-button
+                    type="danger"
+                    link
+                    size="small"
+                    :disabled="isEdit"
+                    @click="removeOption(index)"
+                  >
+                    删除
+                  </el-button>
+                </div>
+              </div>
+            </el-form>
+
+            <el-button
+              type="primary"
+              size="small"
+              :disabled="isEdit"
+              @click="addOption"
+              class="mt-2"
+            >
+              添加选项
+            </el-button>
+          </div>
+        </template>
+      </Form>
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.extend-manage {
+  .mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .w-full {
+    width: 100%;
+  }
+
+  .text-xs {
+    font-size: 0.75rem;
+  }
+
+  .text-gray-500 {
+    color: rgb(107 114 128);
+  }
+
+  .mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .options-config {
+    .options-form {
+      background: #fafafa;
+      border-radius: 4px;
+      padding: 16px;
+
+      .option-row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        padding: 0;
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .option-index {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #e4e7ed;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #606266;
+        flex-shrink: 0;
+      }
+
+      .option-form-item {
+        flex: 1;
+        min-width: 0;
+
+        :deep(.el-form-item__label) {
+          display: none;
+        }
+
+        :deep(.el-form-item__content) {
+          line-height: normal;
+        }
+      }
+
+      .option-actions {
+        flex-shrink: 0;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .el-button.mt-2 {
+      margin-top: 16px;
+    }
+  }
+}
+</style>

package/dist/views/sys/app-menu/application/application-extend-manage.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/app-menu/application/index.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;