12.1 init

src/routes/modules/cygxRoutes.js

@@ -498,6 +498,12 @@ export default [
         name: "微路演管理",
         hidden: false,
       },
+      {
+        path: "themeSurveyPage",
+        component: () => import("@/views/rai_manage/activityManage/themeSurveyPage.vue"),
+        name: "主题调研问卷",
+        hidden: false,
+      },
     ],
   },
   /* 研选活动管理 */
@@ -512,7 +518,7 @@ export default [
         path: "purchaserActivityManage",
         component: () => import("@/views/rai_manage/activityManage/activityManage.vue"),
         name: "活动管理",
-        hidden: false
+        hidden: false,
       },
       {
         path: "addPurchaserActivity",
@@ -569,7 +575,7 @@ export default [
           pathName: "到会管理",
           keepAlive: false,
         },
-      }
+      },
     ],
   },
 ];

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="container vote-dlg-container">
+    <el-dialog
+      v-dialogDrag
+      :close-on-click-modal="false"
+      title="发起投票"
+      :modal-append-to-body="false"
+      center
+      :append-to-body="true"
+      :visible.sync="initiateVotingDlg"
+      :before-close="closeHandler"
+      width="600px"
+    >
+      <div class="vote-dlg-container-theme-survey">
+        <el-form :model="votingForm" :rules="votingRules" ref="votingForm" class="demo-ruleForm">
+          <el-form-item prop="type">
+            <el-select v-model="votingForm.type" placeholder="请选择活动类型" style="width: 100%">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="describe">
+            <div class="fr-wrapper-content-vote-dlg-container">
+              <froala :tag="'textarea'" :config="froalaConfig" v-model="votingForm.describe"></froala>
+            </div>
+          </el-form-item>
+          <el-form-item prop="date">
+            <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-option label="1" value="1"></el-option>
+              <el-option label="2" value="2"></el-option>
+              <el-option label="3" value="3"></el-option>
+              <el-option label="4" value="4"></el-option>
+              <el-option label="5" value="5"></el-option>
+            </el-select>
+          </el-form-item>
+          <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">
+            <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)">
+                <img src="~@/assets/img/icons/delete-Item.png" alt="" />
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <div class="add-theme-box" @click="addThemeHandler">
+              <el-image style="width: 25px; height: 25px; margin-right: 10px" :src="require('@/assets/img/icons/add-img.png')" />
+              <span style="cursor: pointer">添加主题</span>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button style="margin-left: 30px" type="primary" plain @click="closeHandler">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import RichText from "../../../components/richText.vue";
+export default {
+  name: "",
+  components: { RichText },
+  props: {
+    initiateVotingDlg: {
+      type: Boolean,
+      default: false,
+    },
+    rowForm: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    var that = this;
+    return {
+      froalaConfig: {
+        height: 150,
+        fontSizeDefaultSelection: "16",
+        quickInsertEnabled: false,
+        theme: "dark", //主题
+        placeholderText: "请输入首段描述文字",
+        language: "zh_cn",
+        events: {
+          initialized: function () {
+            that.editor = this;
+            that.editor.toolbar.hide();
+          },
+        },
+      },
+      votingForm: {
+        type: "",
+        describe: "",
+        date: "",
+        select: "",
+        themeOne: "",
+        themeTwo: "",
+      },
+      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: [],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    closeHandler() {
+      this.$emit("update:initiateVotingDlg", false);
+    },
+    // 添加主题
+    addThemeHandler() {
+      let id = this.addThemeList.length;
+      this.addThemeList.push({
+        name: "",
+        id,
+      });
+    },
+    deleteThemeItem(item, index) {
+      this.addThemeList.splice(index, 1);
+    },
+    // 点击确定
+    submitForm() {
+      this.$refs.votingForm.validate((valid) => {
+        if (valid) {
+          let isOk = this.addThemeList && this.addThemeList.some((item) => !item.name);
+          if (isOk) return this.$message.error("活动主题输入框不能为空");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.vote-dlg-container-theme-survey {
+  .add-theme-content {
+    display: flex;
+    align-items: center;
+  }
+  .delete-item-icon {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+    cursor: pointer;
+    img {
+      width: 15px;
+      height: 15px;
+    }
+  }
+  .add-theme-box {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.fr-wrapper-content-vote-dlg-container {
+  border-top: 1px solid #cccccc !important;
+  border-bottom: 1px solid #cccccc !important;
+}
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+  <div class="container vote-dlg-container">
+    <!-- 投票结果 -->
+    <el-dialog
+      v-dialogDrag
+      :close-on-click-modal="false"
+      title="投票结果"
+      :modal-append-to-body="false"
+      center
+      :append-to-body="true"
+      :visible.sync="isVotinRgesultsDlg"
+      :before-close="closeHandler(1)"
+      width="300px"
+    >
+      <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>
+    </el-dialog>
+    <!-- 票数明细 -->
+    <el-dialog
+      v-dialogDrag
+      :close-on-click-modal="false"
+      title="票数明细"
+      :modal-append-to-body="false"
+      center
+      :append-to-body="true"
+      :visible.sync="isVoteDetails"
+      :before-close="closeHandler(2)"
+      width="600px"
+    >
+      <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>
+    </el-dialog>
+    <!-- 其余主题 -->
+    <el-dialog
+      v-dialogDrag
+      :close-on-click-modal="false"
+      title="其余主题"
+      :modal-append-to-body="false"
+      center
+      :append-to-body="true"
+      :visible.sync="theRemainingThemeDlg"
+      :before-close="closeHandler(3)"
+      width="600px"
+    >
+      <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="RealName" key="name" label="提交时间"></el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    isVotinRgesultsDlg: {
+      type: Boolean,
+      default: false,
+    },
+    theRemainingThemeDlg: {
+      type: Boolean,
+      default: false,
+    },
+    rowForm: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      isVoteDetails: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    // 关闭弹框事件
+    closeHandler(type) {
+      type == 1 && this.$emit("update:initiateVotingDlg", false);
+      type == 2 && (this.isVoteDetails = false);
+      type == 3 && this.$emit("update:theRemainingThemeDlg", false);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.vote-dlg-container-theme-survey {
+  .add-theme-content {
+    display: flex;
+    align-items: center;
+  }
+  .delete-item-icon {
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+    cursor: pointer;
+    img {
+      width: 15px;
+      height: 15px;
+    }
+  }
+  .add-theme-box {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.fr-wrapper-content-vote-dlg-container {
+  border-top: 1px solid #cccccc !important;
+  border-bottom: 1px solid #cccccc !important;
+}
+</style>

src/views/rai_manage/activityManage/themeSurveyPage.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container">
+    <el-card>
+      <div style="display: flex; justify-content: flex-end">
+        <el-button type="primary" @click="initiateVotingDlg = true">发起投票</el-button>
+      </div>
+    </el-card>
+    <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="RealName" key="name" label="投票结果">
+            <template slot-scope="{ row }">
+              <span @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-card>
+    <vote-dlg :initiateVotingDlg.sync="initiateVotingDlg" :rowForm="rowForm"/>
+    <voting-results-dlg :isVotinRgesultsDlg.sync="isVotinRgesultsDlg" :theRemainingThemeDlg.sync="theRemainingThemeDlg" :rowForm="rowForm" />
+  </div>
+</template>
+
+<script>
+import VoteDlg from "./components/ThemeSurvey/voteDlg.vue";
+import VotingResultsDlg from "./components/ThemeSurvey/votingResultsDlg.vue";
+export default {
+  name: "",
+  components: { VoteDlg, VotingResultsDlg },
+  props: {},
+  data() {
+    return {
+      dataList: [],
+      initiateVotingDlg: false, // 发起投票的弹框
+      isVotinRgesultsDlg: false, // 投票结果的弹框
+      theRemainingThemeDlg: false, // 其余主题的弹框
+      rowForm: {},
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    // 查看投票结果
+    lookResultHandler(item) {
+      this.rowForm = item;
+      this.isVotinRgesultsDlg = true;
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>