pref:修改事项常见问题

base-manager-ui/admin/src/pages/basicset/addmatter/AddMatter.vue

 <template>
   <div class="addmatter">
-    <a-tabs default-active-key="1">
+    <a-tabs v-model="active">
       <div slot="tabBarExtraContent">
         <a-space>
           <a-button @click="handleManage">返回事项列表</a-button>
           <a-button @click="handleBack">返回概要列表</a-button>
         </a-space>
       </div>
-      <a-tab-pane key="1" tab="基本信息">
+      <a-tab-pane :key="1" tab="基本信息">
         <BaseMessage />
       </a-tab-pane>
 
-      <a-tab-pane key="2" tab="申请材料">
-        <ApplyMaterial />
+      <a-tab-pane :key="2" tab="申请材料">
+        <ApplyMaterial v-if="active == 2" />
       </a-tab-pane>
 
-      <a-tab-pane key="3" tab="受理材料">
-        <accept-material></accept-material>
+      <a-tab-pane :key="3" tab="受理材料">
+        <accept-material v-if="active == 3"></accept-material>
       </a-tab-pane>
 
-      <a-tab-pane key="4" tab="办理流程">
-        <Flow />
+      <a-tab-pane :key="4" tab="办理流程">
+        <Flow v-if="active == 4" />
       </a-tab-pane>
 
-      <a-tab-pane key="5" tab="收费标准">
-        <Rates />
+      <a-tab-pane :key="5" tab="收费标准">
+        <Rates v-if="active == 5" />
       </a-tab-pane>
 
-      <a-tab-pane key="6" tab="设定依据">
-        <Pursuant />
+      <a-tab-pane :key="6" tab="设定依据">
+        <Pursuant v-if="active == 6" />
       </a-tab-pane>
 
-      <a-tab-pane key="7" tab="中介服务">
-        <Agency />
+      <a-tab-pane :key="7" tab="中介服务">
+        <Agency v-if="active == 7" />
       </a-tab-pane>
 
-      <a-tab-pane key="8" tab="常见问题">
-        <Question />
+      <a-tab-pane :key="8" tab="常见问题">
+        <Question v-if="active == 8" />
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -54,7 +54,9 @@ import Agency from "./components/agency.vue";
 import Question from "./components/question.vue";
 export default {
   data() {
-    return {};
+    return {
+      active: 1,
+    };
   },
 
   components: {

base-manager-ui/admin/src/pages/basicset/addmatter/components/question.vue

@@ -7,33 +7,37 @@
       <!-- 表格 -->
       <a-table
         bordered
-        :pagination="false"
+        :loading="loading"
+        :pagination="{
+          showTotal: (total) => `共 ${total} 条`,
+          current: current,
+          total: total,
+          pageSize: size,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: pageSizeOptions,
+          onChange: handlechange,
+          onShowSizeChange: showSizeChange,
+        }"
+        :scroll="{ y: 550 }"
         :columns="columns"
         :data-source="tableData"
+        :rowKey="(record) => record.id"
       >
         <template slot="num" slot-scope="text, record, index">
-          {{ index + 1 }}
+          {{ (current - 1) * size + index + 1 }}
         </template>
+
         <template slot="active" slot-scope="text">
+          <a-space size="middle">
             <a class="look-more" @click="handleMore(text)">查看详情</a>
             <a class="edit" @click="handleEdit(text)">编辑</a>
-          <a-popconfirm
-            title="删除不可恢复，确定要删除吗？"
-            @confirm="handleDel(text.id)"
-          >
-            <a-icon slot="icon" type="question-circle-o" style="color: red" />
-            <a class="delete">删除</a>
-          </a-popconfirm>
+            <a class="delete" @click="handleDel(text.id)">删除</a>
+          </a-space>
         </template>
       </a-table>
     </div>
-    <!-- 分页 -->
-    <a-pagination
-      @change="handleChange"
-      v-model="current"
-      :total="total"
-      show-less-items
-    />
+
     <!-- 新增问题 -->
     <a-modal v-model="visible" :title="title" @cancel="handleClose">
       <template slot="footer">
@@ -41,27 +45,21 @@
         <a-button @click="handleInit">重置</a-button>
       </template>
 
-      <a-form-model :model="form" ref="formData" :rules="rules">
-        <!-- <a-form-model-item label="所属事项" prop="matterId">
-          <a-select
-            allowClear
-            @select="handleSelect"
-            v-model="form.matterId"
-            placeholder="请选择所属事项"
-          >
-            <a-select-option
-              v-for="v in matterList"
-              :key="v.id"
-              :value="v.matterId"
-              >{{ v.matterName }}</a-select-option
+      <a-form-model
+        :model="form"
+        ref="formData"
+        :rules="rules"
+        layout="vertical"
       >
-          </a-select>
-        </a-form-model-item> -->
         <a-form-model-item label="问题" prop="question">
           <a-textarea
             v-model="form.question"
             placeholder="请输入问题"
             allow-clear
+            :auto-size="{
+              minRows: 4,
+              maxRows: 6,
+            }"
           />
         </a-form-model-item>
         <a-form-model-item label="答案" prop="answer">
@@ -69,6 +67,10 @@
             v-model="form.answer"
             placeholder="请输入答案"
             allow-clear
+            :auto-size="{
+              minRows: 4,
+              maxRows: 6,
+            }"
           />
         </a-form-model-item>
       </a-form-model>
@@ -106,7 +108,7 @@ const columns = [
   },
   {
     title: "操作",
-    width: "20%",
+    width: "15%",
     scopedSlots: { customRender: "active" },
   },
 ];
@@ -121,6 +123,8 @@ export default {
   data() {
     return {
       columns,
+      loading: false,
+      pageSizeOptions: ["10", "30", "50", "100"],
       tableData: [],
       siteId: "",
       matterList: [],
@@ -148,24 +152,12 @@ export default {
   },
   created() {
     this.getMatterquestionData();
-    // this.getSiteMatterList();
   },
   methods: {
-    // 获取站点事项列表
-    // async getSiteMatterList() {
-    //   this.siteId = this.$route.query.siteId;
-    //   let res = await getSiteMatterList({ siteId: this.siteId });
-    //   this.matterList = res.data.data.data;
-    // },
-
-    // // 事项下拉选择
-    // handleSelect(val, node) {
-    //   let { text } = node.componentOptions.children[0];
-    //   this.form.matterName = text;
-    // },
     // 获取列表
     async getMatterquestionData() {
       if (!local.getLocal("matter")) return;
+      this.loading = true;
       let res = await getMatterquestion({
         page: this.current,
         size: this.size,
@@ -173,14 +165,12 @@ export default {
         matterName: local.getLocal("matter").matterName,
       });
       let { data, total } = res.data.data;
+      this.loading = false;
       if (!data.length && this.current > 1) {
         this.current -= 1;
         this.getMatterquestionData();
       }
       this.total = total;
-      data.forEach((v) => {
-        v.key = v.id;
-      });
       this.tableData = data;
     },
     //   新增
@@ -199,6 +189,12 @@ export default {
       this.current = num;
       this.getMatterquestionData();
     },
+    // 改变每页显示数量
+    showSizeChange(cur, size) {
+      this.current = cur;
+      this.size = size;
+      this.getMatterquestionData();
+    },
     // 保存新增
     handleOk() {
       if (!local.getLocal("matter")) return;
@@ -215,8 +211,6 @@ export default {
             this.$message.success(msg);
             this.$refs.formData.resetFields();
             this.getMatterquestionData();
-          } else {
-            this.$message.error(msg);
           }
         }
       });
@@ -231,16 +225,30 @@ export default {
       this.$refs.formData.resetFields();
     },
     // 删除
-    async handleDel(val) {
-      let res = await delMatterquestion({ id: val });
+    async handleDel(id) {
+      let _this = this;
+      this.$confirm({
+        title: "系统提示",
+        content: "删除不可恢复，确定要删除吗？",
+        okText: "确定",
+        okType: "danger",
+        cancelText: "取消",
+        centered: true,
+        icon: "exclamation-circle",
+        maskClosable: true,
+        async onOk() {
+          let res = await delMatterquestion({ id });
           let { code, msg } = res.data;
           if (code === 1) {
-        this.$message.success(msg);
-        this.getMatterquestionData();
-      } else {
-        this.$message.error(msg);
+            _this.$message.success(msg);
+            _this.getMatterquestionData();
           }
         },
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
+    },
     // 查看详情
     handleMore(data) {
       this.details = data;
@@ -273,19 +281,11 @@ export default {
     margin: 10px 0;
   }
 }
-/deep/.ant-modal-body {
-  .ant-input {
-    height: 200px;
-    width: 100% !important;
-  }
-}
-.table-content {
-  height: 620px;
-}
+
 .answer {
   color: #05b2fe;
 }
-/deep/.ant-form-item-label {
-  width: auto !important;
+/deep/.ant-form-item {
+  display: block !important;
 }
 </style>
\ No newline at end of file