From 354c0c99fc55410e7ba19a58bd592b3f23fe3971 Mon Sep 17 00:00:00 2001
From: yanfeiyong <2060201549@qq.com>
Date: Fri, 23 May 2025 17:21:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=AD=90=E9=82=AE=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assetsManagement/mobileApplication.vue    |  16 +-
 src/views/components/assetsType/index_v3.vue  | 433 +++++++++++-------
 src/views/components/assetsType/index_v4.vue  | 393 +++++++++-------
 3 files changed, 503 insertions(+), 339 deletions(-)

diff --git a/src/views/auditPages/assetsManagement/mobileApplication.vue b/src/views/auditPages/assetsManagement/mobileApplication.vue
index a0b7879..0aea6e4 100644
--- a/src/views/auditPages/assetsManagement/mobileApplication.vue
+++ b/src/views/auditPages/assetsManagement/mobileApplication.vue
@@ -21,16 +21,16 @@
       <div class="L-main" id="L-size-main">
         <div class="content-search" id="L-header">
           <div class="search-title">查询条件</div>
-          <el-form :inline="true" ref="queryFormRef" :model="formInline" size="small" class="demo-form-inline">
+          <el-form :inline="true" ref="queryFormRef" :model="formInline"  class="demo-form-inline">
             <el-row>
               <el-col :span="6">
                 <el-form-item label="所属单位：" prop="dwmc">
-                  <el-input v-model="formInline.dwmc" placeholder="请输入所属单位"></el-input>
+                  <el-input v-model="formInline.dwmc" placeholder="请输入所属单位" style="width: 95%;"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
                 <el-form-item label="移动应用名称：" prop="yymc">
-                  <el-input v-model="formInline.yymc" placeholder="请输入移动应用名称"></el-input>
+                  <el-input v-model="formInline.yymc" placeholder="请输入移动应用名称" style="width: 95%;"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="6">
@@ -49,8 +49,8 @@
               </el-col>
               <el-col :span="6" style="text-align: right;">
                 <el-form-item class="unit-form">
-                  <el-button size="small" @click="resetQuery('queryFrom')">重置</el-button>
-                  <el-button size="small" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
+                  <el-button  @click="resetQuery('queryFrom')">重置</el-button>
+                  <el-button  type="primary" @click="handleQuery('queryFrom')">查询</el-button>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -90,7 +90,7 @@
                   type="info"
                   plain
                   :icon="Upload"
-                  size="small"
+                  
                   @click="handleImport"
                 >导入</el-button>
               </el-col>
@@ -99,7 +99,7 @@
                   type="warning"
                   plain
                   :icon="Download"
-                  size="small"
+                  
                   @click="handleExport"
                 >导出</el-button>
               </el-col>
@@ -108,7 +108,7 @@
                   type="primary"
                   plain
                   :icon="Plus"
-                  size="small"
+                  
                   @click="handleAdd"
                 >新增资产</el-button>
               </el-col>
diff --git a/src/views/components/assetsType/index_v3.vue b/src/views/components/assetsType/index_v3.vue
index 05ad7cd..3c12c42 100644
--- a/src/views/components/assetsType/index_v3.vue
+++ b/src/views/components/assetsType/index_v3.vue
@@ -9,7 +9,7 @@
         <el-form
           :model="ruleForm"
           :rules="rules"
-          ref="ruleForm"
+          ref="ruleFormRef"
           label-width="170px"
           class="demo-ruleForm"
           label-position="right"
@@ -17,9 +17,10 @@
         >
           <el-row>
             <el-col :span="12">
-              <el-form-item label="所属单位" prop="ssdw">
-                <!-- <el-input v-model="ruleForm.ssdw" placeholder="请输入单位名称"></el-input> -->
-                <!-- :disabled="!disabledTwo" -->
+              <el-form-item
+                label="所属单位"
+                prop="ssdw"
+              >
                 <el-autocomplete
                   v-model="ruleForm.ssdw"
                   :fetch-suggestions="querySearchAsync"
@@ -28,7 +29,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="电子邮箱后缀" prop="dzyxhz">
+              <el-form-item
+                label="电子邮箱后缀"
+                prop="dzyxhz"
+              >
                 <el-input
                   v-model="ruleForm.dzyxhz"
                   placeholder="请输入电子邮箱后缀"
@@ -38,10 +42,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="建设类型" required>
-                <el-select v-model="ruleForm.jslx" placeholder="请选择建设类型">
+              <el-form-item
+                label="建设类型"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.jslx"
+                  placeholder="请选择建设类型"
+                >
                   <el-option
-                    v-for="dict in dict.type.email_jslx"
+                    v-for="dict in email_jslx"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -50,7 +60,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="邮件系统供应商" required>
+              <el-form-item
+                label="邮件系统供应商"
+                required
+              >
                 <el-input
                   v-model="ruleForm.yjxtgys"
                   style="width: 100%"
@@ -61,7 +74,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="密码算法" required>
+              <el-form-item
+                label="密码算法"
+                required
+              >
                 <el-input
                   v-model="ruleForm.mmsf"
                   placeholder="请输入密码算法"
@@ -69,14 +85,17 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="邮件系统状态" required>
+              <el-form-item
+                label="邮件系统状态"
+                required
+              >
                 <el-select
                   @change="changeState"
                   v-model="ruleForm.yjxtzc"
                   placeholder="请选择邮件系统状态"
                 >
                   <el-option
-                    v-for="dict in dict.type.email_state"
+                    v-for="dict in email_state"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -87,13 +106,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="安全防护系统" required>
+              <el-form-item
+                label="安全防护系统"
+                required
+              >
                 <el-select
                   v-model="ruleForm.aqfhxt"
                   placeholder="请选择安全防护系统"
                 >
                   <el-option
-                    v-for="dict in dict.type.email_hasorno"
+                    v-for="dict in email_hasorno"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -102,13 +124,16 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="安全备份环境" required>
+              <el-form-item
+                label="安全备份环境"
+                required
+              >
                 <el-select
                   v-model="ruleForm.aqbfhj"
                   placeholder="请选择安全备份环境"
                 >
                   <el-option
-                    v-for="dict in dict.type.email_hasorno"
+                    v-for="dict in email_hasorno"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -119,7 +144,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="数字证书厂商" required>
+              <el-form-item
+                label="数字证书厂商"
+                required
+              >
                 <el-input
                   v-model="ruleForm.szzscs"
                   style="width: 100%"
@@ -128,7 +156,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="上线时间" required>
+              <el-form-item
+                label="上线时间"
+                required
+              >
                 <el-date-picker
                   v-model="ruleForm.sxsj"
                   type="date"
@@ -142,10 +173,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="所属行业" required>
-                <el-select v-model="ruleForm.sshy" placeholder="请选择所属行业">
+              <el-form-item
+                label="所属行业"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.sshy"
+                  placeholder="请选择所属行业"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_sshy"
+                    v-for="dict in app_sshy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -154,10 +191,16 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="重点行业" required>
-                <el-select v-model="ruleForm.zdhy" placeholder="请选择重点行业">
+              <el-form-item
+                label="重点行业"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.zdhy"
+                  placeholder="请选择重点行业"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_zdhy"
+                    v-for="dict in app_zdhy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -168,10 +211,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="行政区划" required>
-                <el-select v-model="ruleForm.xzqh" placeholder="请选择行政区划">
+              <el-form-item
+                label="行政区划"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.xzqh"
+                  placeholder="请选择行政区划"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_xzqh"
+                    v-for="dict in app_xzqh"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -180,7 +229,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="系统责任人" required>
+              <el-form-item
+                label="系统责任人"
+                required
+              >
                 <el-input
                   v-model="ruleForm.xtzrr"
                   style="width: 100%"
@@ -191,49 +243,52 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="系统责任人电话" required>
-                <el-form-item
-                  prop="xtzrrdh"
-                  :rules="[
-                    {
-                      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-                      message: '请输入正确的手机号码',
-                      trigger: 'blur',
-                    },
-                  ]"
-                >
-                  <el-input
-                    v-model="ruleForm.xtzrrdh"
-                    style="width: 100%"
-                    placeholder="请输入系统责任人电话"
-                  ></el-input>
-                </el-form-item>
+              <el-form-item
+                label="系统责任人电话"
+                required
+                prop="xtzrrdh"
+                :rules="[
+                  {
+                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+                    message: '请输入正确的手机号码',
+                    trigger: 'blur',
+                  },
+                ]"
+              >
+                <el-input
+                  v-model="ruleForm.xtzrrdh"
+                  style="width: 100%"
+                  placeholder="请输入系统责任人电话"
+                ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="系统责任人邮箱" required>
-                <el-form-item
-                  prop="xtzrryx"
-                  :rules="[
-                    {
-                      type: 'email',
-                      message: '请输入正确的邮箱地址',
-                      trigger: ['blur', 'change'],
-                    },
-                  ]"
-                >
-                  <el-input
-                    v-model="ruleForm.xtzrryx"
-                    style="width: 100%"
-                    placeholder="请输入系统责任人邮箱"
-                  ></el-input>
-                </el-form-item>
+              <el-form-item
+                label="系统责任人邮箱"
+                required
+                prop="xtzrryx"
+                :rules="[
+                  {
+                    type: 'email',
+                    message: '请输入正确的邮箱地址',
+                    trigger: ['blur', 'change'],
+                  },
+                ]"
+              >
+                <el-input
+                  v-model="ruleForm.xtzrryx"
+                  style="width: 100%"
+                  placeholder="请输入系统责任人邮箱"
+                ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="系统责任人地址" required>
+              <el-form-item
+                label="系统责任人地址"
+                required
+              >
                 <el-input
                   v-model="ruleForm.xtzrrdz"
                   style="width: 100%"
@@ -261,7 +316,10 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-form-item label="简介" required>
+              <el-form-item
+                label="简介"
+                required
+              >
                 <el-input
                   type="textarea"
                   resize="none"
@@ -272,27 +330,42 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row
+          <div
             style="margin: 10px 0; padding-bottom: 50px; text-align: center"
             v-if="pageType !== 'look'"
           >
-            <el-button type="danger" @click="sendBack">取消</el-button>
-            <el-button type="primary" @click="newAssets" :loading="loading"
+            <el-button
+              type="danger"
+              @click="sendBack"
+              >取消</el-button
+            >
+            <el-button
+              type="primary"
+              @click="newAssets"
+              :loading="loading"
               >保存</el-button
             >
-          </el-row>
+          </div>
         </el-form>
-        <el-row
+        <div
           style="margin: 10px 0; padding-bottom: 50px; text-align: center"
           v-if="pageType == 'look'"
         >
-          <el-button type="primary" @click="sendBack">返回</el-button>
-        </el-row>
+          <el-button
+            type="primary"
+            @click="sendBack"
+            >返回</el-button
+          >
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 import {
   assetEmail,
   assetEmailInfo,
@@ -300,115 +373,123 @@ import {
 } from "@/api/auditPagesApi/index";
 import equalToPassword from "@/views/components/assetsType/mainx.js";
 
-export default {
-  dicts: [
-    "app_xzqh",
-    "app_sshy",
-    "app_zdhy",
+const props = defineProps({
+  pageType: String,
+  id: String,
+  queryData: Object,
+});
+
+const router = useRouter();
+
+const { proxy } = getCurrentInstance();
+const { email_jslx, email_state, email_hasorno, app_sshy, app_zdhy, app_xzqh } =
+  proxy.useDict(
     "email_jslx",
     "email_state",
     "email_hasorno",
+    "app_sshy",
+    "app_zdhy",
+    "app_xzqh"
+  );
+
+const ruleFormRef = ref(null);
+const ruleForm = ref({});
+const loading = ref(false);
+const disabled = ref(false);
+
+const changeSateTetx = (rule, value, callback) => {
+  if (ruleForm.value.yjxtzc == 2 && !value) {
+    callback(new Error("请填写"));
+  } else {
+    callback();
+  }
+};
+
+const rules = ref({
+  bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
+  ssdw: [
+    { required: true, message: "所属单位不能为空", trigger: "blur" },
+    { required: true, validator: equalToPassword, trigger: "change" },
   ],
-  data() {
-    const changeSateTetx = (rule, value, callback) => {
-      if (this.ruleForm.yjxtzc == 2 && !value) {
-        callback(new Error("请填写"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      ruleForm: {},
-      rules: {
-        bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
-        ssdw: [
-          { required: true, message: "所属单位不能为空", trigger: "blur" },
-          { required: true, validator: equalToPassword, trigger: "change" },
-        ],
-        dzyxhz: [
-          { required: true, message: "电子邮箱后缀不能为空", trigger: "blur" },
-        ],
-      },
-      loading: false,
-      disabled: false,
-      // disabledTwo:true,
-    };
-  },
-  props: ["pageType", "id", "queryData"],
-  mounted() {
-    if (this.pageType == "look") {
-      this.getInfo(this.id);
-      this.disabled = true;
-      this.$nextTick(() => {
-        const inputElements = document.querySelectorAll(".el-input__inner");
-        const textareaInputElements = document.querySelectorAll(
-          ".el-textarea__inner"
-        );
-        inputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-        textareaInputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-      });
-    } else if (this.pageType == "change") {
-      this.getInfo(this.id);
-      this.disabled = false;
-      // this.disabledTwo = false;
-    }
-  },
-  methods: {
-    changeState(e) {
-      if (e != 2) {
-        this.ruleForm.bfyy = "";
-      }
-    },
-    getInfo(id) {
-      assetEmailInfo(id).then((res) => {
-        this.ruleForm = res.data;
-      });
-    },
-    // 单位名称模糊查询
-    querySearchAsync(queryString, cb) {
-      let results = [];
-      unitAllList({ nickName: queryString }).then((res) => {
-        res.data.forEach((item) => {
-          results.push({
-            value: item.nickName,
-            id: item.id,
-          });
-        });
+  dzyxhz: [
+    { required: true, message: "电子邮箱后缀不能为空", trigger: "blur" },
+  ],
+});
+
+onMounted(() => {
+  if (props.pageType == "look") {
+    getInfo(props.id);
+    disabled.value = true;
+    nextTick(() => {
+      const inputElements = document.querySelectorAll(".el-input__inner");
+      const textareaInputElements = document.querySelectorAll(
+        ".el-textarea__inner"
+      );
+      inputElements.forEach((input) => {
+        input.placeholder = "";
       });
-      cb(results);
-    },
-    // 新增资产确认按钮
-    newAssets() {
-      this.$refs["ruleForm"].validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          if (this.pageType == "change") {
-            assetEmail("put", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("修改成功");
-              // this.$router.go(-1);
-              this.$router.push({ name: "Email", params: this.queryData });
-            });
-          } else {
-            assetEmail("post", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("新增成功");
-              this.$router.go(-1);
-            });
-          }
-        }
+      textareaInputElements.forEach((input) => {
+        input.placeholder = "";
       });
-    },
-    sendBack() {
-      // this.$router.go(-1);
-      this.$router.push({ name: "Email", params: this.queryData });
-    },
-  },
+    });
+  } else if (props.pageType == "change") {
+    getInfo(props.id);
+    disabled.value = false;
+  }
+});
+
+const changeState = (e) => {
+  if (e != 2) {
+    ruleForm.value.bfyy = "";
+  }
+};
+
+const getInfo = async (id) => {
+  try {
+    const res = await assetEmailInfo(id);
+    ruleForm.value = res.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const querySearchAsync = async (queryString, cb) => {
+  let results = [];
+  try {
+    const res = await unitAllList({ nickName: queryString });
+    results = res.data.map((item) => ({
+      value: item.nickName,
+      id: item.id,
+    }));
+    cb(results);
+  } catch (error) {
+    console.error(error);
+    cb(results);
+  }
+};
+
+const newAssets = async () => {
+  try {
+    await ruleFormRef.value.validate();
+    loading.value = true;
+
+    if (props.pageType == "change") {
+      await assetEmail("put", ruleForm.value);
+      ElMessage.success("修改成功");
+      router.push({ name: "Email", params: props.queryData });
+    } else {
+      await assetEmail("post", ruleForm.value);
+      ElMessage.success("新增成功");
+      router.go(-1);
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const sendBack = () => {
+  router.push({ name: "Email", params: props.queryData });
 };
 </script>
diff --git a/src/views/components/assetsType/index_v4.vue b/src/views/components/assetsType/index_v4.vue
index bbf8af5..b0740e3 100644
--- a/src/views/components/assetsType/index_v4.vue
+++ b/src/views/components/assetsType/index_v4.vue
@@ -9,7 +9,7 @@
         <el-form
           :model="ruleForm"
           :rules="rules"
-          ref="ruleForm"
+          ref="ruleFormRef"
           label-width="170px"
           class="demo-ruleForm"
           label-position="right"
@@ -17,9 +17,11 @@
         >
           <el-row>
             <el-col :span="12">
-              <el-form-item label="所属单位" required prop="ssdw">
-                <!-- <el-input v-model="ruleForm.ssdw" placeholder="请输入单位名称"></el-input> -->
-                <!-- :disabled="!disabledTwo" -->
+              <el-form-item
+                label="所属单位"
+                required
+                prop="ssdw"
+              >
                 <el-autocomplete
                   v-model="ruleForm.ssdw"
                   :fetch-suggestions="querySearchAsync"
@@ -28,7 +30,11 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="移动应用名称" required prop="appName">
+              <el-form-item
+                label="移动应用名称"
+                required
+                prop="appName"
+              >
                 <el-input
                   v-model="ruleForm.appName"
                   placeholder="请输入移动应用名称"
@@ -38,7 +44,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="包名" required>
+              <el-form-item
+                label="包名"
+                required
+              >
                 <el-input
                   v-model="ruleForm.pack"
                   style="width: 100%"
@@ -47,13 +56,16 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="icp备案状态" required>
+              <el-form-item
+                label="icp备案状态"
+                required
+              >
                 <el-select
                   v-model="ruleForm.icpState"
                   placeholder="请选择icp备案状态"
                 >
                   <el-option
-                    v-for="dict in dict.type.app_icp_state"
+                    v-for="dict in app_icp_state"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -64,7 +76,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="icp备案号" required>
+              <el-form-item
+                label="icp备案号"
+                required
+              >
                 <el-input
                   v-model="ruleForm.icpbah"
                   placeholder="请输入icp备案号"
@@ -76,28 +91,28 @@
                 class="daoqitixingren"
                 label="统一社会信用代码"
                 required
+                prop="tyshxydm"
+                :rules="[
+                  {
+                    pattern: /^[a-zA-Z0-9]{18}$/,
+                    message: '请输入正确格式的18位统一社会信用代码',
+                    trigger: 'blur',
+                  },
+                ]"
               >
-                <el-form-item
-                  prop="tyshxydm"
-                  :rules="[
-                    {
-                      pattern: /^[a-zA-Z0-9]{18}$/,
-                      message: '请输入正确格式的18位统一社会信用代码',
-                      trigger: 'blur',
-                    },
-                  ]"
-                >
-                  <el-input
-                    v-model="ruleForm.tyshxydm"
-                    placeholder="请输入统一信用代码"
-                  ></el-input>
-                </el-form-item>
+                <el-input
+                  v-model="ruleForm.tyshxydm"
+                  placeholder="请输入统一信用代码"
+                ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="文件名" required>
+              <el-form-item
+                label="文件名"
+                required
+              >
                 <el-input
                   v-model="ruleForm.wjm"
                   placeholder="请输入文件名"
@@ -105,10 +120,16 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="所属行业" required>
-                <el-select v-model="ruleForm.sshy" placeholder="请选择所属行业">
+              <el-form-item
+                label="所属行业"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.sshy"
+                  placeholder="请选择所属行业"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_sshy"
+                    v-for="dict in app_sshy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -119,10 +140,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="重点行业" required>
-                <el-select v-model="ruleForm.zdhy" placeholder="请选择重点行业">
+              <el-form-item
+                label="重点行业"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.zdhy"
+                  placeholder="请选择重点行业"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_zdhy"
+                    v-for="dict in app_zdhy"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -131,10 +158,16 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="行政区划" required>
-                <el-select v-model="ruleForm.xzqh" placeholder="请选择行政区划">
+              <el-form-item
+                label="行政区划"
+                required
+              >
+                <el-select
+                  v-model="ruleForm.xzqh"
+                  placeholder="请选择行政区划"
+                >
                   <el-option
-                    v-for="dict in dict.type.app_xzqh"
+                    v-for="dict in app_xzqh"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -145,13 +178,16 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="安全加固情况" required>
+              <el-form-item
+                label="安全加固情况"
+                required
+              >
                 <el-select
                   v-model="ruleForm.aqjgqk"
                   placeholder="请选择安全加固情况"
                 >
                   <el-option
-                    v-for="dict in dict.type.app_aqjgqk"
+                    v-for="dict in app_aqjgqk"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -160,7 +196,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="版本信息" required>
+              <el-form-item
+                label="版本信息"
+                required
+              >
                 <el-input
                   v-model="ruleForm.bbxx"
                   style="width: 100%"
@@ -171,7 +210,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="版本信息（版本号）" required>
+              <el-form-item
+                label="版本信息（版本号）"
+                required
+              >
                 <el-input
                   v-model="ruleForm.bbh"
                   style="width: 100%"
@@ -180,7 +222,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="版本信息（MD5）" required>
+              <el-form-item
+                label="版本信息（MD5）"
+                required
+              >
                 <el-input
                   v-model="ruleForm.bbxxMd5"
                   style="width: 100%"
@@ -191,7 +236,10 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="版本信息（上架平台）" required>
+              <el-form-item
+                label="版本信息（上架平台）"
+                required
+              >
                 <el-input
                   v-model="ruleForm.bbxxSjpt"
                   style="width: 100%"
@@ -200,7 +248,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="文件大小" required>
+              <el-form-item
+                label="文件大小"
+                required
+              >
                 <el-input
                   v-model="ruleForm.wjdx"
                   style="width: 100%"
@@ -211,14 +262,17 @@
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="移动应用系统状态" required>
+              <el-form-item
+                label="移动应用系统状态"
+                required
+              >
                 <el-select
                   v-model="ruleForm.appState"
                   placeholder="请选择移动应用系统状态"
                   @change="changeState"
                 >
                   <el-option
-                    v-for="dict in dict.type.gzh_state"
+                    v-for="dict in gzh_state"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value"
@@ -246,7 +300,10 @@
           </el-row>
           <el-row>
             <el-col :span="24">
-              <el-form-item label="简介" required>
+              <el-form-item
+                label="简介"
+                required
+              >
                 <el-input
                   type="textarea"
                   resize="none"
@@ -257,143 +314,169 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row
+          <div
             style="margin: 10px 0; padding-bottom: 30px; text-align: center"
             v-if="pageType !== 'look'"
           >
-            <el-button type="danger" @click="sendBack">取消</el-button>
-            <el-button type="primary" @click="newAssets" :loading="loading"
+            <el-button
+              type="danger"
+              @click="sendBack"
+              >取消</el-button
+            >
+            <el-button
+              type="primary"
+              @click="newAssets"
+              :loading="loading"
               >保存</el-button
             >
-          </el-row>
+          </div>
         </el-form>
-        <el-row
+        <div
           style="margin: 10px 0; padding-bottom: 50px; text-align: center"
           v-if="pageType == 'look'"
         >
-          <el-button type="primary" @click="sendBack">返回</el-button>
-        </el-row>
+          <el-button
+            type="primary"
+            @click="sendBack"
+            >返回</el-button
+          >
+        </div>
       </div>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 import { assetApp, assetAppInfo, unitAllList } from "@/api/auditPagesApi/index";
 import equalToPassword from "@/views/components/assetsType/mainx.js";
 
-export default {
-  dicts: [
+const props = defineProps({
+  pageType: String,
+  id: String,
+  queryData: Object,
+});
+
+const router = useRouter();
+
+const { proxy } = getCurrentInstance();
+const { app_icp_state, app_sshy, app_zdhy, app_xzqh, app_aqjgqk, gzh_state } =
+  proxy.useDict(
     "app_icp_state",
     "app_sshy",
     "app_zdhy",
     "app_xzqh",
     "app_aqjgqk",
-    "gzh_state",
+    "gzh_state"
+  );
+
+// Initialize your dicts here or fetch them from API
+
+const ruleFormRef = ref(null);
+const ruleForm = ref({});
+const loading = ref(false);
+const disabled = ref(false);
+
+const changeSateTetx = (rule, value, callback) => {
+  if (ruleForm.value.appState == 7 && !value) {
+    callback(new Error("请填写"));
+  } else {
+    callback();
+  }
+};
+
+const rules = {
+  bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
+  ssdw: [
+    { required: true, message: "所属单位不能为空", trigger: "blur" },
+    { required: true, validator: equalToPassword, trigger: "change" },
+  ],
+  appName: [
+    { required: true, message: "移动应用名称不能为空", trigger: "blur" },
   ],
-  data() {
-    const changeSateTetx = (rule, value, callback) => {
-      if (this.ruleForm.appState == 7 && !value) {
-        callback(new Error("请填写"));
+};
+
+const changeState = (e) => {
+  if (e != 7) {
+    ruleForm.value.bfyy = "";
+  }
+};
+
+const getInfo = async (id) => {
+  try {
+    const res = await assetAppInfo(id);
+    ruleForm.value = res.data;
+  } catch (error) {
+    console.error("Error fetching asset info:", error);
+  }
+};
+
+// 单位名称模糊查询
+const querySearchAsync = async (queryString, cb) => {
+  try {
+    const res = await unitAllList({ nickName: queryString });
+    const results = res.data.map((item) => ({
+      value: item.nickName,
+      id: item.id,
+    }));
+    cb(results);
+  } catch (error) {
+    console.error("Error fetching unit list:", error);
+    cb([]);
+  }
+};
+
+// 新增资产确认按钮
+const newAssets = async () => {
+  try {
+    const valid = await ruleFormRef.value.validate();
+    if (valid) {
+      loading.value = true;
+      if (props.pageType == "change") {
+        await assetApp("put", ruleForm.value);
+        ElMessage.success("修改成功");
+        router.push({
+          name: "MobileApplication",
+          params: props.queryData,
+        });
       } else {
-        callback();
+        await assetApp("post", ruleForm.value);
+        ElMessage.success("新增成功");
+        router.go(-1);
       }
-    };
-    return {
-      ruleForm: {},
-      rules: {
-        bfyy: [{ validator: changeSateTetx, trigger: "blur" }],
-        ssdw: [
-          { required: true, message: "所属单位不能为空", trigger: "blur" },
-          { required: true, validator: equalToPassword, trigger: "change" },
-        ],
-        appName: [
-          { required: true, message: "移动应用名称不能为空", trigger: "blur" },
-        ],
-      },
-      loading: false,
-      disabled: false,
-      // disabledTwo:true,
-    };
-  },
-  props: ["pageType", "id", "queryData"],
-  mounted() {
-    if (this.pageType == "look") {
-      this.getInfo(this.id);
-      this.disabled = true;
-      this.$nextTick(() => {
-        const inputElements = document.querySelectorAll(".el-input__inner");
-        const textareaInputElements = document.querySelectorAll(
-          ".el-textarea__inner"
-        );
-        inputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-        textareaInputElements.forEach((input) => {
-          input.placeholder = "";
-        });
-      });
-    } else if (this.pageType == "change") {
-      this.getInfo(this.id);
-      this.disabled = false;
-      // this.disabledTwo = false;
     }
-  },
-  methods: {
-    changeState(e) {
-      if (e != 7) {
-        this.ruleForm.bfyy = "";
-      }
-    },
+  } catch (error) {
+    console.error("Error saving asset:", error);
+  } finally {
+    loading.value = false;
+  }
+};
 
-    getInfo(id) {
-      assetAppInfo(id).then((res) => {
-        this.ruleForm = res.data;
-      });
-    },
-    // 单位名称模糊查询
-    querySearchAsync(queryString, cb) {
-      let results = [];
-      unitAllList({ nickName: queryString }).then((res) => {
-        res.data.forEach((item) => {
-          results.push({
-            value: item.nickName,
-            id: item.id,
-          });
-        });
+const sendBack = () => {
+  router.push({ name: "MobileApplication", params: props.queryData });
+};
+
+onMounted(() => {
+  if (props.pageType == "look") {
+    getInfo(props.id);
+    disabled.value = true;
+    nextTick(() => {
+      const inputElements = document.querySelectorAll(".el-input__inner");
+      const textareaInputElements = document.querySelectorAll(
+        ".el-textarea__inner"
+      );
+      inputElements.forEach((input) => {
+        input.placeholder = "";
       });
-      cb(results);
-    },
-    // 新增资产确认按钮
-    newAssets() {
-      this.$refs["ruleForm"].validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          if (this.pageType == "change") {
-            assetApp("put", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("修改成功");
-              // this.$router.go(-1);
-              this.$router.push({
-                name: "MobileApplication",
-                params: this.queryData,
-              });
-            });
-          } else {
-            assetApp("post", this.ruleForm).then((res) => {
-              // console.log(res,"res");
-              this.loading = false;
-              this.$modal.msgSuccess("新增成功");
-              this.$router.go(-1);
-            });
-          }
-        }
+      textareaInputElements.forEach((input) => {
+        input.placeholder = "";
       });
-    },
-    sendBack() {
-      // this.$router.go(-1);
-      this.$router.push({ name: "MobileApplication", params: this.queryData });
-    },
-  },
-};
+    });
+  } else if (props.pageType == "change") {
+    getInfo(props.id);
+    disabled.value = false;
+  }
+});
 </script>