login

src/views/GenShortLink.vue

@@ -2,13 +2,13 @@
   <div id="app-container" class="p-3">
     <el-row :gutter="10">
       <el-col :span="1.5">
-        <el-button @click="handleAdd" type="primary" size="small" icon="plus"
+        <el-button @click="handleAdd" type="primary" size="small" :icon="Plus"
           >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          icon="delete"
+          :icon="Delete"
           @click="handleDelete()"
           type="danger"
           size="small"
@@ -89,6 +89,13 @@
         label="过期时间"
         prop="validityTime"
       ></el-table-column>
+      <el-table-column label="状态" width="80" align="center">
+        <template #default="{ row }">
+          <el-tag v-if="row.status === '0'" type="success">启用</el-tag>
+          <el-tag v-else-if="row.status === '1'" type="danger">禁用</el-tag>
+          <el-tag v-else type="warning">未知</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column align="center" label="操作">
         <template #default="{ row }">
           <el-button
@@ -143,14 +150,33 @@
           ></el-input>
         </el-form-item>
 
-        <el-form-item label="有效期" prop="validityTime">
+        <el-form-item ref="validityTimeRef" label="有效期" prop="validityTime">
+          <el-radio-group
+            :style="{ marginRight: '10px' }"
+            v-model="isPermanent"
+            @change="changePermanent"
+          >
+            <el-radio :label="true">永久</el-radio>
+            <el-radio :label="false">自定义</el-radio>
+          </el-radio-group>
+
           <el-date-picker
+            v-if="!isPermanent"
             value-format="YYYY-MM-DD HH:mm:ss"
             v-model="form.validityTime"
             type="datetime"
             placeholder="请选择过期时间"
           />
         </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-switch
+            v-model="form.status"
+            inactive-value="1"
+            active-value="0"
+            inactive-text="禁用"
+            active-text="启用"
+          ></el-switch>
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -191,11 +217,13 @@ import {
 import { reactive, ref, toRefs } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { ShortLink } from "@/types/ShortLink";
+import { CopyDocument, Delete, Plus } from "@element-plus/icons-vue";
 
 import QrcodeVue from "qrcode.vue";
 import { useRouter } from "vue-router";
 
 const qrcodeRef = ref();
+const isPermanent = ref(false);
 const shortLinkList = ref<ShortLink[]>([]);
 const showEditDialog = ref(false);
 const editDialogTitle = ref<string>("");
@@ -245,8 +273,13 @@ const data = reactive<{
   },
 });
 const { form, queryParams, rules } = toRefs(data);
+const validityTimeRef = ref();
+const changePermanent = (status: boolean) => {
+  if (status) validityTimeRef.value.clearValidate();
+};
 const total = ref<number>(0);
 const router = useRouter();
+
 const getList = async () => {
   const resp = await listShortLink(queryParams.value);
   shortLinkList.value = resp.data.rows;
@@ -327,6 +360,10 @@ const handleDelete = (id?: string) => {
 };
 
 const submitForm = async () => {
+  if (isPermanent.value) {
+    form.value.validityTime = "2099-12-12 23:59:59";
+  }
+  await formRef.value.validate();
   if (form.value.id) {
     await updateShortLink(form.value);
     ElMessage.success("短链接修改成功");