web资产弹窗字段整理和渲染

src/views/auditPages/assetsManagement.vue

@@ -20,7 +20,7 @@
         icon="el-icon-upload2"
         size="mini"
         @click="handleImport"
-        >导入</el-button
+        >导入11</el-button
       >
 
       <el-button
@@ -32,7 +32,11 @@
         >导出</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>
@@ -148,6 +152,7 @@
         >
           <template slot-scope="scope">
             <el-button type="primary" size="mini" plain icon="el-icon-view"
+            @click="handleDialog(scope.row.id, true)"
               >查看</el-button
             >
             <el-button
@@ -221,7 +226,7 @@
       </el-dialog>
 
       <!-- 新增/修改/查看 -->
-      <assetsManagement />
+      <assetsManagement @finish="handleQuery" ref="myDialog" />
     </template>
   </main-app>
 </template>
@@ -278,6 +283,10 @@ export default {
     this.getDeptTree();
   },
   methods: {
+        // 弹窗操作
+        handleDialog(id, disabled) {
+      this.$refs.myDialog.openDialog(id, disabled);
+    },
     /**导出 */
     handleExport() {
       this.download(

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

@@ -14,8 +14,73 @@
       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
@@ -30,21 +95,107 @@
 </template>
 
 <script>
+import formTitle from "../formTitle.vue";
+import { checkRole } from "@/utils/permission"; // 权限判断函数
+import { list, listRules } from "./index.js"
+import { assetUnitData, assetInfo, unitAllList } from "@/api/auditPagesApi/index";
 export default {
+  components: { formTitle },
+  dicts:[
+    'is_no','zc_xtlx','zc_xtzyx','zc_xtzt','zc_zxzt','zc_c_i_a',
+    'zc_yhgm','zc_xtbsfs','zc_hlwkfyt','fgfw','wlxz','ywlx','hlqk','fwdx',
+    'fwfw','dbxx_dbdj','dbxx_zjps','sf_cpszsdj','sjzc_gxsx','sjzc_kfsx','sjzc_sjly',
+    'sjzc_gxzq','sjzc_sjfjfl','fwq_czxt','wlw_fwdx','wlw_wlhlqk','wlw_fwfw','dwlx','sb_ip',
+    'xtfhqk_fcg','xtfhqk_fxl','xtfhqk_fzd','xtfhqk_fls', 'database_type','tc_xttz'
+  ],
   data() {
     return {
       loading: false,
       options: [],
-      list: [],
+      list: list,
       title: "",
       open: true,
       ruleForm: {},
-      rules: {},
+      rules: listRules,
       disabled: false,
     };
   },
   methods: {
-    submit() {},
+            /** 打开对话框 */
+      openDialog(id, disabled) {
+      if (!id) {
+        this.title = "新增资产";
+        this.resetForm("ruleForm");
+        this.ruleForm = {};
+        this.open = true;
+      } else {
+        this.getInfo(id);
+        this.disabled = disabled;
+      }
+    },
+    getInfo(id) {
+      assetInfo(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 assetUnitData("put", this.ruleForm);
+        this.$modal.msgSuccess("修改成功");
+      } else {
+        await assetUnitData("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("请输入正确的企业");
+      }
+    },
+    addItem(key) {
+      if (!this.ruleForm[key]) {
+        this.$set(this.ruleForm, key, []);
+      }
+      this.ruleForm[key].push({});
+    },
   },
 };
 </script>