移动应用全部功能

src/views/auditPages/assetsManagement/mobileApplication.vue

@@ -18,11 +18,21 @@
         >导入</el-button
       >
 
-      <el-button type="warning" plain icon="el-icon-download" size="mini"
+      <el-button
+        type="warning"
+        plain
+        icon="el-icon-download"
+        size="mini"
+        @click="handleExport"
         >导出</el-button
       >
 
-      <el-button type="primary" plain icon="el-icon-plus" size="mini"
+      <el-button
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleDialog()"
         >新增资产</el-button
       >
     </template>
@@ -33,6 +43,7 @@
         size="small"
         :inline="true"
         label-width="110px"
+        class="search-form"
       >
         <el-form-item label="所属单位：" prop="dwmc">
           <el-input
@@ -115,7 +126,12 @@
           align="center"
         >
           <template slot-scope="scope">
-            <el-button type="primary" size="mini" plain icon="el-icon-view"
+            <el-button
+              type="primary"
+              size="mini"
+              plain
+              icon="el-icon-view"
+              @click="handleDialog(scope.row.id, true)"
               >查看</el-button
             >
             <el-button
@@ -123,9 +139,15 @@
               size="mini"
               plain
               icon="el-icon-edit-outline"
+              @click="handleDialog(scope.row.id)"
               >修改</el-button
             >
-            <el-button type="danger" size="mini" plain icon="el-icon-delete"
+            <el-button
+              type="danger"
+              size="mini"
+              plain
+              icon="el-icon-delete"
+              @click="handleDel(scope.row.id)"
               >删除</el-button
             >
           </template>
@@ -141,6 +163,48 @@
         :limit.sync="formInline.size"
         @pagination="getList"
       />
+      <!-- 资产导入对话框 -->
+      <el-dialog
+        :title="upload.title"
+        :visible.sync="upload.open"
+        width="400px"
+        append-to-body
+      >
+        <el-upload
+          ref="upload"
+          :limit="1"
+          accept=".xlsx, .xls"
+          :headers="upload.headers"
+          :action="upload.url + '?updateSupport=' + upload.updateSupport"
+          :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress"
+          :on-success="handleFileSuccess"
+          :auto-upload="false"
+          drag
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip text-center" slot="tip">
+            <!-- <div class="el-upload__tip" slot="tip">
+                <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+              </div> -->
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate"
+              >下载模板</el-link
+            >
+          </div>
+        </el-upload>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </el-dialog>
+      <!-- 新增修改查看 -->
+      <mobileApp ref="myDialog" @finish="handleQuery" />
     </template>
   </main-app>
 </template>
@@ -152,7 +216,10 @@ import {
   deleteAssetApp,
   schema,
 } from "@/api/auditPagesApi/index";
+import mobileApp from "@/views/auditPages/components/assetsManagement/mobileApp.vue";
+
 export default {
+  components: { mobileApp },
   dicts: ["gzh_state"],
   data() {
     return {
@@ -198,6 +265,23 @@ export default {
     this.getDeptTree();
   },
   methods: {
+    // 弹窗操作
+    handleDialog(id, disabled) {
+      this.$refs.myDialog.openDialog(id, disabled);
+    },
+    //删除
+    handleDel(id) {
+      this.$modal
+        .confirm('是否确认删除用户编号为"' + id + '"的数据项？')
+        .then(function () {
+          return deleteAssetApp(id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
     // 修改table背景色
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 !== 0) {
@@ -259,16 +343,52 @@ export default {
         this.tableData = res.data.records;
       });
     },
+    // 导出
+    handleExport() {
+      this.download(
+        "/tc/assetApp/export",
+        {
+          ...this.formInline,
+        },
+        `移动应用程序资产${new Date().getTime()}.xlsx`
+      );
+    },
+    // 导入
+    handleImport() {
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download(
+        "/tc/assetApp/importTemplate",
+        {},
+        `移动应用程序资产导入模板${new Date().getTime()}.xlsx`
+      );
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(
+        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+          response.msg +
+          "</div>",
+        "导入结果",
+        { dangerouslyUseHTMLString: true }
+      );
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-form-item__content {
-  width: 280px;
-  .el-select,
-  .el-date-editor {
-    width: 100%;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/auditPages/components/assetsManagement/mobileApp.js

@@ -1,3 +1,145 @@
-const formData = [];
-const formRules = {};
+const formData = [
+  {
+    key: "ssdw",
+    label: "所属单位",
+    type: "autocomplete",
+    prop: "ssdw",
+  },
+  {
+    key: "appName",
+    label: "移动应用名称",
+    type: "input",
+    prop: "appName",
+  },
+
+  {
+    key: "pack",
+    label: "包名",
+    type: "input",
+    prop: "pack",
+  },
+  {
+    key: "icpState",
+    label: "icp备案状态",
+    type: "select",
+    prop: "icpState",
+    dict: "app_icp_state",
+  },
+  {
+    key: "icpbah",
+    label: "icp备案号",
+    type: "input",
+    prop: "icpbah",
+  },
+  {
+    key: "tyshxydm",
+    label: "统一社会信用代码",
+    type: "input",
+    prop: "tyshxydm",
+  },
+  {
+    key: "wjm",
+    label: "文件名",
+    type: "input",
+    prop: "wjm",
+  },
+  {
+    key: "sshy",
+    label: "所属行业",
+    type: "select",
+    prop: "sshy",
+    dict: "app_sshy",
+  },
+  {
+    key: "zdhy",
+    label: "重点行业",
+    type: "select",
+    prop: "zdhy",
+    dict: "app_zdhy",
+  },
+  {
+    key: "xzqh",
+    label: "行政区划",
+    type: "select",
+    prop: "xzqh",
+    dict: "app_xzqh",
+  },
+  {
+    key: "aqjgqk",
+    label: "安全加固情况",
+    type: "select",
+    prop: "aqjgqk",
+    dict: "app_aqjgqk",
+  },
+  {
+    key: "bbxx",
+    label: "版本信息",
+    type: "input",
+    prop: "bbxx",
+  },
+  {
+    key: "bbh",
+    label: "版本信息（版本号）",
+    type: "input",
+    prop: "bbh",
+  },
+  {
+    key: "bbxxMd5",
+    label: "版本信息（MD5）",
+    type: "input",
+    prop: "bbxxMd5",
+  },
+  {
+    key: "bbxxSjpt",
+    label: "版本信息（上架平台）",
+    type: "input",
+    prop: "bbxxSjpt",
+  },
+  {
+    key: "wjdx",
+    label: "文件大小",
+    type: "input",
+    prop: "wjdx",
+  },
+  {
+    key: "appState",
+    label: "移动应用系统状态",
+    type: "select",
+    prop: "appState",
+    dict: "gzh_state",
+  },
+  {
+    key: "jj",
+    label: "简介",
+    type: "textarea",
+    prop: "jj",
+  },
+];
+const formRules = {
+  ssdw: [{ required: true, message: "请填写", trigger: "blur" }],
+  appName: [{ required: true, message: "请填写", trigger: "blur" }],
+  pack: [{ required: true, message: "请填写", trigger: "blur" }],
+  icpState: [{ required: true, message: "请填写", trigger: "blur" }],
+  icpbah: [{ required: true, message: "请填写", trigger: "blur" }],
+  tyshxydm: [
+    { required: true, message: "请填写", trigger: "blur" },
+    {
+      pattern: /^[a-zA-Z0-9]{18}$/,
+      message: "请输入正确格式的18位统一社会信用代码",
+      trigger: "blur",
+    },
+  ],
+  wjm: [{ required: true, message: "请填写", trigger: "blur" }],
+  sshy: [{ required: true, message: "请填写", trigger: "blur" }],
+  zdhy: [{ required: true, message: "请填写", trigger: "blur" }],
+  xzqh: [{ required: true, message: "请填写", trigger: "blur" }],
+  aqjgqk: [{ required: true, message: "请填写", trigger: "blur" }],
+  bbxx: [{ required: true, message: "请填写", trigger: "blur" }],
+  bbh: [{ required: true, message: "请填写", trigger: "blur" }],
+  bbxxMd5: [{ required: true, message: "请填写", trigger: "blur" }],
+  bbxxSjpt: [{ required: true, message: "请填写", trigger: "blur" }],
+  wjdx: [{ required: true, message: "请填写", trigger: "blur" }],
+  appState: [{ required: true, message: "请填写", trigger: "blur" }],
+  jj: [{ required: true, message: "请填写", trigger: "blur" }],
+};
 export { formData, formRules };

src/views/auditPages/components/assetsManagement/mobileApp.vue

@@ -14,7 +14,83 @@
       label-position="right"
       :disabled="disabled"
     >
+      <form-title title="基本信息"></form-title>
+      <div class="grid-container">
+        <el-form-item
+          :label="item.label"
+          v-for="(item, index) in list"
+          :key="index"
+          :prop="item.prop"
+          :class="item.type == 'textarea' ? 'full-width' : ''"
+        >
+          <el-select
+            v-if="item.type == 'autocomplete'"
+            v-model="ruleForm[item.key]"
+            filterable
+            remote
+            placeholder="请输入关键词"
+            :remote-method="remoteMethod"
+            :loading="loading"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.nickName"
+              :value="item.nickName"
+            >
+            </el-option>
+          </el-select>
+          <!-- 输入框 -->
+          <el-input
+            v-if="item.type == 'input'"
+            v-model="ruleForm[item.key]"
+            :placeholder="'请输入' + item.label"
+          ></el-input>
+          <!-- 选择框 -->
+          <el-select
+            v-if="item.type == 'select'"
+            v-model="ruleForm[item.key]"
+            :placeholder="'请选择' + item.label"
+          >
+            <el-option
+              v-for="dict in dict.type[item.dict]"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+          <!-- 日期框 -->
+          <el-date-picker
+            v-if="item.type == 'date'"
+            v-model="ruleForm[item.key]"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+          <!-- 多行文本框 -->
+          <el-input
+            v-if="item.type == 'textarea'"
+            type="textarea"
+            resize="none"
+            placeholder="请输入系统简介"
+            :rows="5"
+            v-model="ruleForm[item.key]"
+          ></el-input>
+        </el-form-item>
+      </div>
     </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="open = false" size="medium">返 回</el-button>
+      <el-button
+        type="primary"
+        size="medium"
+        @click="submit()"
+        v-show="!disabled"
+        >确 定</el-button
+      >
+    </span>
   </el-dialog>
 </template>
 
@@ -22,8 +98,17 @@
 import formTitle from "../formTitle.vue";
 import { checkRole } from "@/utils/permission"; // 权限判断函数
 import { formData, formRules } from "./mobileApp.js";
+import { assetApp, assetAppInfo, unitAllList } from "@/api/auditPagesApi/index";
 export default {
   components: { formTitle },
+  dicts: [
+    "app_icp_state",
+    "app_sshy",
+    "app_zdhy",
+    "app_xzqh",
+    "app_aqjgqk",
+    "gzh_state",
+  ],
   data() {
     return {
       loading: false,
@@ -31,15 +116,104 @@ export default {
       list: formData,
       title: "",
       open: false,
-      ruleForm: {
-        rules: formRules,
-        disabled: false,
-      },
+      ruleForm: {},
+      rules: formRules,
+      disabled: false,
     };
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.remoteMethod();
+  },
+  methods: {
+    /** 打开对话框 */
+    openDialog(id, disabled) {
+      if (!id) {
+        this.title = "新增移动应用";
+        this.resetForm("ruleForm");
+        this.ruleForm = {};
+        this.open = true;
+      } else {
+        this.getInfo(id);
+        this.disabled = disabled;
+      }
+    },
+    getInfo(id) {
+      assetAppInfo(id).then((res) => {
+        this.resetForm("ruleForm");
+        this.ruleForm = res.data;
+        this.title = "修改移动应用";
+        this.open = true;
+      });
+    },
+    submit() {
+      let index = 0;
+      let portion = [];
+      let isUnit = checkRole(["unit"]);
+      if (!isUnit) {
+        // 只验证部分(管理端)
+        portion = ["ssdw", "appName", "tyshxydm"];
+        this.$refs["ruleForm"].validateField(portion, (errors) => {
+          if (errors) {
+            console.log("部分字段验证失败:", errors);
+          } else {
+            index++;
+            if (index == portion.length) {
+              this.subFu();
+            }
+          }
+        });
+      } else {
+        //全部验证
+        this.$refs["ruleForm"].validate((valid) => {
+          if (valid) {
+            this.subFu();
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      }
+    },
+    async subFu() {
+      if (this.ruleForm.id != null) {
+        await assetApp("put", this.ruleForm);
+        this.$modal.msgSuccess("修改成功");
+      } else {
+        await assetApp("post", this.ruleForm);
+        this.$modal.msgSuccess("新增成功");
+      }
+      this.open = false;
+      this.$emit("finish");
+    },
+    /**单位名称模糊查询 */
+    async remoteMethod(query) {
+      let res = await unitAllList({ nickName: query });
+      this.options = res.data;
+      if (this.options.length == 0) {
+        this.ruleForm.ssdw = "";
+        this.$message.error("请输入正确的企业");
+      }
+    },
+  },
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.grid-container {
+  display: grid;
+  /* 设置网格布局为一行两列 */
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+/* 定义强制占一行的类样式 */
+.full-width {
+  /* 让元素跨越两列，从而占满一行 */
+  grid-column: span 2;
+}
+::v-deep .el-select,
+.el-cascader,
+.el-date-editor,
+.el-autocomplete {
+  width: 100%;
+}
+</style>