From 72d537565829cc59f2c09ba2b9d00bc256ed439a Mon Sep 17 00:00:00 2001
From: yf <770153798@qq.com>
Date: Wed, 5 Mar 2025 00:53:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E7=BB=84=E5=88=AB=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomerGroupDataListDialog/DataForm.vue  |  71 ++++
 .../config.data.ts                            |  33 ++
 .../src/CustomerGroupDataListDialog/index.vue | 319 ++++++++++++++++++
 3 files changed, 423 insertions(+)
 create mode 100644 hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/DataForm.vue
 create mode 100644 hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/config.data.ts
 create mode 100644 hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/index.vue

diff --git a/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/DataForm.vue b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/DataForm.vue
new file mode 100644
index 0000000..bb29bf1
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/DataForm.vue
@@ -0,0 +1,71 @@
+<template>
+  <Dialog :title="dialogTitle"   append-to-body v-model="dialogVisible">
+    <Form :disabled="disabled" ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+
+    <template #footer>
+      <el-button v-if="!disabled" @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+
+
+import { rules, allSchemas } from './config.data'
+import {CustomerGroupApi, CustomerGroupVO} from "@/api/oms/customergroup";
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+
+const disabled = computed(() => {
+  return formType.value !== 'create' && formType.value !== 'update'
+})
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await CustomerGroupApi.getCustomerGroup(id)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as CustomerGroupVO
+    if (formType.value === 'create') {
+      await CustomerGroupApi.createCustomerGroup(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CustomerGroupApi.updateCustomerGroup(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/config.data.ts b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/config.data.ts
new file mode 100644
index 0000000..f0decc7
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/config.data.ts
@@ -0,0 +1,33 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+
+// 表单校验
+export const rules = reactive({
+
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+
+  {
+    label: 'code',
+    field: 'code',
+    width: 200,
+    isSearch: true,
+  },
+  {
+    label: 'name',
+    field: 'name',
+    isSearch: true,
+  },
+  {
+    label: 'remark',
+    field: 'remark',
+    isTable: false,
+  },
+  {
+    label: 'options',
+    field: 'action',
+    isForm: false
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/index.vue b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/index.vue
new file mode 100644
index 0000000..4780f18
--- /dev/null
+++ b/hangtag-ui/hangtag-ui-admin/src/components/Dialog/src/CustomerGroupDataListDialog/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <slot>
+    <div>
+      <el-input
+        v-model="that.showValue"
+        clearable
+        :placeholder="props.placeholder"
+        @clear="clearData"
+        @click="viewDetails"
+      >
+        <template #append>
+          <el-button @click.stop="openDialog">
+            <Icon icon="ep:search"/>
+          </el-button>
+        </template>
+      </el-input>
+    </div>
+  </slot>
+  {{tmp}}
+  <Dialog
+    :title="dialogTitle"
+    width="80%"
+    append-to-body
+    v-model="that.visible"
+    @close="updateVisible(false)">
+    <div>
+      <!-- 搜索工作栏 -->
+      <ContentWrap>
+        <Search
+          :schema="allSchemas.searchSchema"
+          :is-col="false"
+          @search="setSearchParams"
+          @reset="setSearchParams">
+          <!-- 新增等操作按钮 -->
+          <template #actionMore>
+            <el-button v-if="isCanEdit"
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['oms:draft-design-data:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px"/>
+              新增
+            </el-button>
+            <div v-else>
+
+            </div>
+          </template>
+        </Search>
+      </ContentWrap>
+
+      <!-- 列表 -->
+      <ContentWrap>
+        <Table
+          :columns="allSchemas.tableColumns"
+          :data="tableObject.tableList"
+          :loading="tableObject.loading"
+          :selection="true"
+          ref="tableRef"
+          @selection-change="selectionChange"
+          :pagination="{ total: tableObject.total
+          }"
+          v-model:pageSize="tableObject.pageSize"
+          v-model:currentPage="tableObject.currentPage"
+        >
+          <template #action="{ row }">
+            <div  v-if="isCanEdit">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', row.id)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(row.id)"
+              >
+                删除
+              </el-button>
+            </div>
+            <div v-else>
+              -
+            </div>
+          </template>
+        </Table>
+      </ContentWrap>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="updateVisible(false,true)">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit">{{ t('common.ok') }}</el-button>
+      </span>
+    </template>
+  </Dialog>
+  <!-- 表单弹窗：添加/修改 -->
+  <DataForm ref="formRef" @success="getList"/>
+</template>
+
+<script lang="ts" setup name="ProductTypeDataListDialog">
+import {allSchemas} from './config.data'
+
+import DataForm from './DataForm.vue'
+import {CustomerGroupApi} from "@/api/oms/customergroup";
+
+
+defineOptions({name: 'CustomerGroupDataListDialog'})
+const emit = defineEmits(['update:modelValue', 'update:visible', 'submit']) // 定义 success 事件，用于操作成功后的回调
+
+const {t} = useI18n() // 国际化
+
+const dialogTitle = ref('Customer group') // 弹窗的标题
+
+const props = defineProps({
+  modelValue: {
+    type: [String,Number],
+    required: true
+  },
+  dataKey: {
+    type: String,
+    required: false,
+    default: 'id'
+  },
+  showKey: {
+    type: String,
+    required: false,
+    default: 'name'
+  },
+  multiple: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  isCanEdit: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+
+  placeholder: {
+    type: String,
+    required: false,
+    default: 'selectText'
+  },
+  width: {
+    type: String,
+    required: false,
+    default: '64px'
+  },
+  height: {
+    type: String,
+    required: false,
+    default: '64px'
+  },
+  visible: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+const that = reactive({
+  inputVal: '',
+  showValue: '',
+  visible: false,
+})
+const toStr = (data: any, def = '') => {
+  if (data !== null && data !== undefined) {
+    return `${data}`
+  }
+  return def
+}
+const openDialog = () => {
+  updateVisible(true);
+}
+const viewDetails = () => {
+  if (that.inputVal) {
+    openForm("preview", that.inputVal.split(",")[0])
+  } else {
+    openDialog();
+  }
+}
+let map = new Map();
+const initInput = async () => {
+  const dataKey = that.inputVal + ',' + props.dataKey + ',' + props.showKey + ',' + props.multiple;
+  if (map.has(dataKey)) {
+    const data = map.get(dataKey)
+    if (data) {
+      that.inputVal = data.inputVal
+      that.showValue = data.showValue
+      console.log('缓存数据', data)
+      return;
+    }
+  }
+
+  const ids = that.inputVal.split(",");
+  let tmpInput = [];
+  let tmpShow = [];
+  for (let i = 0; i < ids.length; i++) {
+    const data = await CustomerGroupApi.getCustomerGroup(ids[i])
+    tmpInput.push(data[props.dataKey]);
+    tmpShow.push(data[props.showKey]);
+  }
+  that.inputVal = tmpInput.join(',');
+  that.showValue = tmpShow.join(',');
+  map.set(dataKey, {
+    inputVal: that.inputVal,
+    showValue: that.showValue
+  })
+}
+watch(() => props.visible, (newVal) => {
+  that.visible = newVal;
+
+})
+
+watch(() => props.modelValue, (newVal)=>{
+  that.inputVal = toStr(newVal,'')
+  if (that.inputVal) {
+    initInput();
+  }
+},{
+  immediate: true
+})
+// 用监听属性变化无其他意义
+const tmp = computed(()=>{
+  setTimeout(()=>{
+    that.inputVal = toStr(props.modelValue,that.inputVal)
+    if (that.inputVal) {
+      initInput();
+    }
+  },100)
+  return ''
+},{deep: true})
+
+
+const clearData = () => {
+  that.inputVal = '';
+  that.showValue = '';
+  updateValue();
+}
+const updateVisible = (visible: boolean, clearInput = false) => {
+  that.visible = visible;
+  emit("update:visible", visible)
+  if (clearInput) {
+    clearData();
+  }
+}
+defineExpose({}) // 提供 open 方法，用于打开弹窗
+
+const submit = () => {
+  updateValue();
+  updateVisible(false)
+}
+const updateValue = () => {
+  emit("update:modelValue", that.inputVal)
+}
+//
+const selectionChange = (row) => {
+  if (row && row.length > 0) {
+    if (props.multiple) {
+      that.inputVal = row.map(item => item[props.dataKey || 'id']).join(',')
+      that.showValue = row.map(item => item[props.showKey || 'id']).join(',')
+    } else {
+      if (row.length > 1) {
+        useMessage().warning('单选数据，已忽略其他')
+      }
+      that.showValue = row[row.length - 1][props.showKey || 'id']
+      that.inputVal = row[row.length - 1][props.dataKey || 'id']
+    }
+  } else {
+    that.inputVal = ''
+    that.showValue = ''
+  }
+
+}
+
+const {tableObject, tableMethods} = useTable({
+  getListApi: CustomerGroupApi.getCustomerGroupPage, // 分页接口
+  delListApi: CustomerGroupApi.deleteCustomerGroup // 删除接口
+})
+// 获得表格的各种操作
+const {getList, setSearchParams} = tableMethods
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+
+:deep(.el-input__wrapper) {
+  position: relative;
+
+  .el-input__inner {
+    padding-right: 18px;
+  }
+
+  .el-input__suffix {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+</style>