@utogether/udp-core 1.0.0 → 1.0.1-beta.10

package/src/components/SuCommon/card/components/DialogForm.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { message } from '@/utils/message';
-import { FormInstance } from 'element-plus';
-
-const SELECT_OPTIONS = [
-  { label: '网关', value: 1 },
-  { label: '人工智能', value: 2 },
-  { label: 'CVM', value: 3 },
-  { label: '防火墙', value: 4 },
-  { label: '未知', value: 5 }
-];
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  data: {
-    type: Object,
-    default: () => {
-      return {};
-    }
-  }
-});
-
-const ruleFormRef = ref<FormInstance>();
-
-const formVisible = ref(false);
-const formData = ref(props.data);
-const textareaValue = ref('');
-
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate(valid => {
-    if (valid) {
-      message('提交成功', { type: 'success' });
-      formVisible.value = false;
-      resetForm(formEl);
-    }
-  });
-};
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
-
-const closeDialog = () => {
-  formVisible.value = false;
-  resetForm(ruleFormRef.value);
-};
-
-const emit = defineEmits(['update:visible']);
-watch(
-  () => formVisible.value,
-  val => {
-    emit('update:visible', val);
-  }
-);
-
-watch(
-  () => props.visible,
-  val => {
-    formVisible.value = val;
-  }
-);
-
-watch(
-  () => props.data,
-  val => {
-    formData.value = val;
-  }
-);
-
-const rules = {
-  name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
-};
-</script>
-
-<template>
-  <el-dialog v-model="formVisible" title="新建产品" :width="680" draggable :before-close="closeDialog">
-    <!-- 表单内容 -->
-    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
-      <el-form-item label="产品名称" prop="name">
-        <el-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入产品名称" />
-      </el-form-item>
-      <el-form-item label="产品状态" prop="status">
-        <el-radio-group v-model="formData.status">
-          <el-radio label="0">已停用</el-radio>
-          <el-radio label="1">已启用</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="产品描述" prop="description">
-        <el-input
-          v-model="formData.description"
-          :style="{ width: '480px' }"
-          placeholder="请输入产品描述"
-        />
-      </el-form-item>
-      <el-form-item label="产品类型" prop="type">
-        <el-select v-model="formData.type" clearable :style="{ width: '480px' }">
-          <el-option
-            v-for="(item, index) in SELECT_OPTIONS"
-            :key="index"
-            :value="item.value"
-            :label="item.label"
-          >
-            {{ item.label }}
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注" prop="mark">
-        <el-input
-          v-model="textareaValue"
-          type="textarea"
-          :style="{ width: '480px' }"
-          placeholder="请输入内容"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="closeDialog">取消</el-button>
-      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
-    </template>
-  </el-dialog>
-</template>

package/src/components/SuCommon/card/index.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="main">
-    <div class="w-full flex justify-between mb-4">
-      <vxe-button icon="" @click="formDialogVisible = true"> 新建产品 </vxe-button>
-      <!-- <el-button :icon="useRenderIcon(AddFill)" @click="formDialogVisible = true"> 新建产品 </el-button> -->
-      <vxe-input
-        v-model="searchValue"
-        style="width: 300px"
-        placeholder="请输入关键字查询"
-        clearable
-        type="search"
-      />
-    </div>
-    <div v-loading="dataLoading">
-      <el-empty
-        v-show="
-          productList
-            .slice(
-              pagination.pageSize * (pagination.current - 1),
-              pagination.pageSize * pagination.current
-            )
-            .filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase())).length === 0
-        "
-        description="暂无数据"
-      />
-      <template v-if="pagination.total > 0">
-        <el-row :gutter="16">
-          <el-col
-            v-for="(product, index) in productList
-              .slice(
-                pagination.pageSize * (pagination.current - 1),
-                pagination.pageSize * pagination.current
-              )
-              .filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase()))"
-            :key="index"
-            :xs="24"
-            :sm="12"
-            :md="8"
-            :lg="6"
-            :xl="4"
-          >
-            <Card
-              :product="product"
-              @delete-item="handleDeleteItem"
-              @manage-product="handleManageProduct"
-            />
-          </el-col>
-        </el-row>
-        <el-pagination
-          v-model:currentPage="pagination.current"
-          class="float-right"
-          :page-size="pagination.pageSize"
-          :total="pagination.total"
-          :page-sizes="[12, 24, 36]"
-          :background="true"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="onPageSizeChange"
-          @current-change="onCurrentChange"
-        />
-      </template>
-    </div>
-    <dialogForm v-model:visible="formDialogVisible" :data="formData" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Card from './components/Card.vue';
-import { successMessage } from '@utogether/utils';
-import { ElMessageBox } from 'element-plus';
-import { ref, onMounted, nextTick } from 'vue';
-import dialogForm from './components/DialogForm.vue';
-// import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-// import AddFill from '@iconify-icons/ri/add-circle-line';
-
-defineOptions({
-  name: 'ListCard'
-});
-
-const INITIAL_DATA = {
-  name: '',
-  status: '',
-  description: '',
-  type: '',
-  mark: ''
-};
-
-const pagination = ref({ current: 1, pageSize: 12, total: 0 });
-
-const productList = ref([{ name: '1' }]);
-const dataLoading = ref(true);
-
-const getCardListData = async () => {
-  try {
-    productList.value = [];
-    pagination.value = {
-      ...pagination.value,
-      total: 0
-    };
-  } catch (e) {
-    console.log(e);
-  } finally {
-    setTimeout(() => {
-      dataLoading.value = false;
-    }, 500);
-  }
-};
-
-onMounted(() => {
-  getCardListData();
-});
-
-const formDialogVisible = ref(false);
-const formData = ref({ ...INITIAL_DATA });
-const searchValue = ref('');
-
-const onPageSizeChange = (size: number) => {
-  pagination.value.pageSize = size;
-  pagination.value.current = 1;
-};
-const onCurrentChange = (current: number) => {
-  pagination.value.current = current;
-};
-const handleDeleteItem = product => {
-  ElMessageBox.confirm(
-    product ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复` : '',
-    '提示',
-    {
-      type: 'warning'
-    }
-  )
-    .then(() => {
-      successMessage('删除成功');
-    })
-    .catch(() => {});
-};
-const handleManageProduct = product => {
-  formDialogVisible.value = true;
-  nextTick(() => {
-    formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
-  });
-};
-</script>

package/src/components/SuCommon/icon-select/index.vue

@@ -1,241 +0,0 @@
-<template>
-  <div class="selector w-full">
-    <el-input v-model="inputValue" readonly size="small" class="u-icon-input relative">
-      <template #append>
-        <span
-          v-if="inputValue"
-          class="u-icon-close item-center justify-center text-sm hidden absolute"
-          @click="onDel"
-        >
-          <IconifyIconOffline icon="ri:close-circle-line" />
-        </span>
-        <el-popover
-          :visible="visible"
-          :width="350"
-          :popper-options="{ placement: 'auto' }"
-          :teleported="props.teleported"
-          trigger="click"
-          popper-class="udp-popper"
-          @hide="onHiden"
-        >
-          <template #reference>
-            <div
-              class="w-7 h-full cursor-pointer flex justify-center items-center"
-              @click="visible = !visible"
-            >
-              <i :class="currentActiveType + icon" style="font-size: 16px" />
-            </div>
-          </template>
-
-          <div class="flex items-center pr-2">
-            <el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable />
-          </div>
-          <el-divider border-style="dashed" />
-          <el-scrollbar height="220px">
-            <template #default>
-              <ul class="flex flex-wrap px-2 ml-2">
-                <li
-                  v-for="(item, key) in pageList"
-                  :key="key"
-                  :title="item"
-                  class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
-                  :style="iconItemStyle(item)"
-                  @click="onChangeIcon(item)"
-                >
-                  <i :class="currentActiveType + item" class="w-5 h-5 text-xl" />
-                </li>
-              </ul>
-            </template>
-          </el-scrollbar>
-          <el-divider border-style="dashed" />
-
-          <div class="w-full h-9 flex items-center overflow-auto border-t border-[#e5e7eb]">
-            <el-pagination
-              class="flex-auto ml-2"
-              :total="total"
-              :current-page="currentPage"
-              :page-size="pageSize"
-              :pager-count="5"
-              layout="pager"
-              background
-              small
-              @current-change="onCurrentChange"
-            />
-            <vxe-button
-              class="justify-end mr-2 ml-2"
-              status="danger"
-              size="small"
-              type="text"
-              content="取消"
-              @click="onHiden"
-            />
-          </div>
-        </el-popover>
-      </template>
-    </el-input>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'SuIconSelect'
-};
-</script>
-
-<script setup lang="ts">
-import { ref, computed, CSSProperties, toRef, watch, onMounted } from 'vue';
-import { clone } from 'xe-utils';
-import { iconSet } from '@utogether/utils';
-
-type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
-
-const props = defineProps({
-  modelValue: {
-    require: false,
-    type: String
-  },
-  teleported: {
-    require: false,
-    type: Boolean
-  }
-});
-const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>();
-
-const visible = ref(false);
-const inputValue = toRef(props, 'modelValue');
-
-const iconList = ref(Object.keys(iconSet.icons));
-const currentActiveType = ref('ri-');
-const icon = ref();
-
-// 深拷贝图标数据，前端做搜索
-const copyIconList = clone(iconList.value, true);
-
-const pageSize = ref(35);
-const currentPage = ref(1);
-
-const total = ref(0);
-
-// 搜索条件
-const filterValue = ref('');
-
-const setInitIcon = () => {
-  icon.value = 'corner-down-right-fill';
-  if (inputValue.value) {
-    icon.value = inputValue.value.split(':')[1];
-  }
-};
-
-const pageList = computed(() => {
-  if (currentPage.value === 1) {
-    return copyIconList
-      .filter(v => v.includes(filterValue.value))
-      .slice(currentPage.value - 1, pageSize.value);
-  } else {
-    return copyIconList
-      .filter(v => v.includes(filterValue.value))
-      .slice(
-        pageSize.value * (currentPage.value - 1),
-        pageSize.value * (currentPage.value - 1) + pageSize.value
-      );
-  }
-});
-
-const iconItemStyle = computed((): ParameterCSSProperties => {
-  return item => {
-    if (inputValue.value === currentActiveType.value + item) {
-      return {
-        borderColor: 'var(--el-color-primary)',
-        color: 'var(--el-color-primary)'
-      };
-    }
-  };
-});
-
-function onChangeIcon(item) {
-  icon.value = item;
-  emit('update:modelValue', transformIcon());
-  onHiden();
-}
-
-function onCurrentChange(page) {
-  currentPage.value = page;
-}
-
-const transformIcon = () => {
-  if (currentActiveType.value === 'ri-') {
-    return 'ri:' + icon.value;
-  }
-  return currentActiveType.value + icon.value;
-};
-
-const onDel = () => {
-  icon.value = 'corner-down-right-fill';
-  emit('update:modelValue', '');
-};
-
-const setTotal = () => {
-  if (currentPage.value === 1) {
-    total.value = copyIconList.filter(v => v.includes(filterValue.value)).length;
-  } else {
-    total.value = copyIconList.length;
-  }
-};
-
-const onHiden = () => {
-  visible.value = false;
-  filterValue.value = '';
-};
-
-watch(
-  () => {
-    return props.modelValue;
-  },
-  () => {
-    if (props.modelValue) {
-      icon.value = props.modelValue.substring(props.modelValue.indexOf(':') + 1);
-    }
-  }
-);
-watch(
-  () => {
-    return filterValue.value;
-  },
-  () => {
-    currentPage.value = 1;
-    setTotal();
-  }
-);
-
-onMounted(() => {
-  setTotal();
-  setInitIcon();
-});
-</script>
-
-<style lang="scss" scoped>
-.el-divider--horizontal {
-  margin: 1px auto !important;
-}
-
-.icon-item {
-  &:hover {
-    color: var(--el-color-primary);
-    border-color: var(--el-color-primary);
-    transform: scaleX(1.05);
-    transition: all 0.4s;
-  }
-}
-
-:deep(.el-input-group__append) {
-  padding: 0;
-}
-
-.u-icon-input:hover {
-  .u-icon-close {
-    left: -22px;
-    display: flex;
-    background-color: #fff;
-  }
-}
-</style>