表单校验

src/api/modules/rai/raiApi.js

@@ -3,8 +3,9 @@ import timeLineApi from "./timeLine.js";
 import raiReport from "./reportApi";
 import raiBanner from "./bannerApi.js";
 import internalInterface from "./internalApi.js";
-import lableApi from "./lableApi.js"
+import lableApi from "./lableApi.js";
 import raiPoints from "./pointsApi.js";
+import voteApi from "./voteApi.js";
 /* 权益小程序管理 */
 const raiInterface = {
   ...raiReport,
@@ -13,6 +14,7 @@ const raiInterface = {
   ...internalInterface,
   ...lableApi,
   ...raiPoints,
+  ...voteApi,
   /* 
 		优化建议列表
 		PageSize CurrentIndex KeyWord  

src/api/modules/rai/voteApi.js

@@ -0,0 +1,15 @@
+import http from "@/api/http.js";
+/* 权益小程序管理  视频列表模块*/
+
+const raiVote = {
+  /* 列表 */
+  questionnaireList: (params) => {
+    return http.get("/cygx/questionnaire/list", params);
+  },
+  /* 列表 */
+  questionnairePreserveAndEdit: (params) => {
+    return http.post("/cygx/questionnaire/preserveAndEdit", params);
+  },
+};
+
+export default raiVote;

src/views/rai_manage/activityManage/components/ThemeSurvey/voteDlg.vue

@@ -28,7 +28,7 @@
             <el-date-picker v-model="votingForm.date" type="date" placeholder="请设置投票截止时间" style="width: 100%"> </el-date-picker>
           </el-form-item>
           <el-form-item prop="select">
-            <el-select v-model="votingForm.select" placeholder="最多可选几项" style="width: 100%">
+            <el-select v-model="votingForm.select" placeholder="最多可选几项" style="width: 100%" @change="selectChangeHandler">
               <el-option label="1" value="1"></el-option>
               <el-option label="2" value="2"></el-option>
               <el-option label="3" value="3"></el-option>
@@ -36,16 +36,16 @@
               <el-option label="5" value="5"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item prop="themeOne">
+          <!-- <el-form-item prop="themeOne">
             <el-input v-model="votingForm.themeOne" placeholder="活动主题" style="width: 100%"></el-input>
           </el-form-item>
           <el-form-item prop="themeTwo">
             <el-input v-model="votingForm.themeTwo" placeholder="活动主题" style="width: 100%"></el-input>
-          </el-form-item>
-          <el-form-item v-for="(item, index) in addThemeList" :key="index">
+          </el-form-item> -->
+          <el-form-item v-for="(item, index) in addThemeList" :key="index" :prop="'ActivityTheme' + index">
             <div class="add-theme-content">
-              <el-input v-model="item.name" placeholder="活动主题" style="width: 100%"></el-input>
-              <div class="delete-item-icon" @click="deleteThemeItem(item, index)">
+              <el-input v-model="item.ActivityTheme" placeholder="活动主题" style="width: 100%" @input="validateFormItem(index)" clearable></el-input>
+              <div class="delete-item-icon" @click="deleteThemeItem(item, index)" v-if="index >= 2">
                 <img src="~@/assets/img/icons/delete-Item.png" alt="" />
               </div>
             </div>
@@ -67,7 +67,10 @@
 </template>
 
 <script>
+import { raiInterface, raiSpecial } from "@/api/api.js";
+
 import RichText from "../../../components/richText.vue";
+import { async } from "@antv/x6/lib/registry/marker/main";
 export default {
   name: "",
   components: { RichText },
@@ -109,12 +112,14 @@ export default {
       votingRules: {
         type: [{ required: true, message: "请选择活动类型", trigger: "change" }],
         describe: [{ required: true, message: "请输入首段描述文字", trigger: "blur" }],
-        themeOne: [{ required: true, message: "请输入活动主题", trigger: "blur" }],
-        themeTwo: [{ required: true, message: "请输入活动主题", trigger: "blur" }],
         date: [{ type: "date", required: true, message: "请设置投票截止时间", trigger: "change" }],
         select: [{ required: true, message: "请输入最多可选几项", trigger: "change" }],
       },
-      addThemeList: [],
+      addThemeList: [
+        { QuestionnaireThemeId: 0, ActivityTheme: "" },
+        { QuestionnaireThemeId: 0, ActivityTheme: "" },
+      ],
+      listTheme: [],
     };
   },
   computed: {},
@@ -134,20 +139,34 @@ export default {
       });
     },
     deleteThemeItem(item, index) {
-      this.addThemeList.splice(index, 1);
+      if (index >= 2) {
+        this.addThemeList.splice(index, 1);
+      }
     },
     // 点击确定
     submitForm() {
-      this.$refs.votingForm.validate((valid) => {
+      this.$refs.votingForm.validate(async (valid) => {
         if (valid) {
           let isOk = this.addThemeList && this.addThemeList.some((item) => !item.name);
           if (isOk) return this.$message.error("活动主题输入框不能为空");
+          const res = await raiInterface.questionnairePreserveAndEdit({
+            ActivityTypeId: this.votingForm.type,
+            MaxChooseTotal: this.votingForm.select,
+            Content: this.votingForm.describe,
+            EndTime: this.votingForm.date,
+          });
         } else {
           console.log("error submit!!");
           return false;
         }
       });
     },
+    // 选择的change事件
+    selectChangeHandler() {},
+     validateFormItem(index) {
+      // 动态校验单个表单项
+      this.$refs.votingForm.validateField('activityTheme' + index);
+    },
   },
 };
 </script>

src/views/rai_manage/activityManage/themeSurveyPage.vue

@@ -8,35 +8,56 @@
     <el-card>
       <div>
         <el-table border :data="dataList">
-          <el-table-column align="center" prop="RealName" key="name" label="发布时间"></el-table-column>
-          <el-table-column align="center" prop="RealName" key="name" label="活动类型"></el-table-column>
-          <el-table-column align="center" prop="RealName" key="name" label="投票截止时间"></el-table-column>
-          <el-table-column align="center" prop="RealName" key="name" label="更新时间"></el-table-column>
+          <el-table-column align="center" prop="PublishTime" key="name" label="发布时间"></el-table-column>
+          <el-table-column align="center" prop="ActivityTypeName" key="name" label="活动类型"></el-table-column>
+          <el-table-column align="center" prop="EndTime" key="EndTime" label="投票截止时间"></el-table-column>
+          <el-table-column align="center" prop="ModifyTime" key="ModifyTime" label="更新时间"></el-table-column>
+          <el-table-column align="center" prop="State" key="State" label="状态">
+            <template slot-scope="{ row }">
+              <span :class="[row.State == '发布中' && 'editsty']">{{ row.State }}</span>
+            </template>
+          </el-table-column>
           <el-table-column align="center" prop="RealName" key="name" label="投票结果">
             <template slot-scope="{ row }">
-              <span @click="lookResultHandler(row)">查看</span>
+              <span class="editsty" @click="lookResultHandler(row)">查看</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="OtherThemeTotal" key="name" label="其余主题">
+            <template slot-scope="{ row }">
+              <span class="editsty" @click="lookResultHandler(row)">{{ row.OtherThemeTotal }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="RealName" key="name" label="操作">
+            <template slot-scope="{ row }">
+              <span class="editsty" @click="lookResultHandler(row)">编辑</span>
             </template>
           </el-table-column>
-          <el-table-column align="center" prop="RealName" key="name" label="其余主题"></el-table-column>
-          <el-table-column align="center" prop="RealName" key="name" label="操作"></el-table-column>
         </el-table>
       </div>
+      <!-- 分页 -->
+      <el-col :span="24" class="toolbar">
+        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
+      </el-col>
     </el-card>
-    <vote-dlg :initiateVotingDlg.sync="initiateVotingDlg" :rowForm="rowForm"/>
+    <vote-dlg :initiateVotingDlg.sync="initiateVotingDlg" :rowForm="rowForm" />
     <voting-results-dlg :isVotinRgesultsDlg.sync="isVotinRgesultsDlg" :theRemainingThemeDlg.sync="theRemainingThemeDlg" :rowForm="rowForm" />
   </div>
 </template>
 
 <script>
+import { raiInterface, raiSpecial } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
 import VoteDlg from "./components/ThemeSurvey/voteDlg.vue";
 import VotingResultsDlg from "./components/ThemeSurvey/votingResultsDlg.vue";
 export default {
   name: "",
-  components: { VoteDlg, VotingResultsDlg },
+  components: { VoteDlg, VotingResultsDlg, mPage },
   props: {},
   data() {
     return {
       dataList: [],
+      page_no: 1,
+      total: 0,
       initiateVotingDlg: false, // 发起投票的弹框
       isVotinRgesultsDlg: false, // 投票结果的弹框
       theRemainingThemeDlg: false, // 其余主题的弹框
@@ -46,13 +67,31 @@ export default {
   computed: {},
   watch: {},
   created() {},
-  mounted() {},
+  mounted() {
+    this.getDataList();
+  },
   methods: {
     // 查看投票结果
     lookResultHandler(item) {
       this.rowForm = item;
       this.isVotinRgesultsDlg = true;
     },
+    // 获取列表
+    async getDataList() {
+      const res = await raiInterface.questionnaireList({
+        PageSize: 10,
+        CurrentIndex: this.page_no,
+      });
+      if (res.Ret === 200) {
+        this.dataList = res.Data.List || [];
+        this.total = res.Data.Paging.Totals;
+      }
+    },
+    //分页
+    handleCurrentChange(page) {
+      this.page_no = page;
+      this.getDataList();
+    },
   },
 };
 </script>