新增题目管理中的新建题目四个页面内容

src/common/Constant.js

@@ -42,3 +42,9 @@ export const ENGINEERING_WORK_LIST = [
   // { title: "测量工", value: "CeLiangGong" },
   { title: '线路工', value: 'XianLuGong' },
 ]
+export const EXAM_QUESTION_TYPE = [
+  { title: '填空题', code: 'TianKong' },
+  { title: '单选题', code: 'DanXuan' },
+  { title: '多选题', code: 'DuoXuan' },
+  { title: '判断题', code: 'PanDuan' },
+]

src/styles/common/index.less

@@ -28,3 +28,44 @@
   text-overflow: ellipsis !important;
 }
 
+// 新建题目的统一样式
+.exam-question-create-body {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  .question-option {
+    padding-left: 56px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .question-option-title {
+      font-size: 14px;
+      color: #383838;
+    }
+    .question-option-add {
+      font-size: 12px;
+      color: @mainColorBlueNormal;
+      cursor: pointer;
+    }
+  }
+  .question-option-list-row {
+    position: relative;
+    .question-option-list-row-delete {
+      height: 40px;
+      line-height: 40px;
+      position: absolute;
+      left: 18px;
+      z-index: 2;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+      font-size: 12px;
+      cursor: pointer;
+      &:hover {
+        color: @mainColorBlueNormal;
+      }
+    }
+  }
+}
+

src/views/examQuestionManagement/examQuestionList.vue

@@ -86,19 +86,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { ENGINEERING_WORK_LIST } from '@/common/Constant';
+import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
 export default {
   name: 'examQuestionList',
   props: {},
   components: {},
   data() {
     return {
-      defaultType: [
-        { title: '填空题', code: 'TianKong' },
-        { title: '单选题', code: 'DanXuan' },
-        { title: '多选题', code: 'DuoXuan' },
-        { title: '判断题', code: 'PanDuan' },
-      ],
+      defaultType: EXAM_QUESTION_TYPE,
       examQuestionType: [], // 所属题目类型列表
       checkedExamQuestionType: '', // 所选题目类型
       engineeringWorkList: [], // 工种数据列表

src/views/examQuestionManagement/examQusetionCreateGapFilling.vue

@@ -1,40 +1,211 @@
 <template>
   <div class="app-container">
-    <div class="common-card">
-      <div>这里是填空题</div>
-    </div>
-    <div class="common-card a-card-margin-top">
-      <div>这里是内容</div>
+    <div class="common-card exam-question-create-body">
+      <a-spin :spinning="loading">
+        <a-form
+          :form="loginForm"
+          @submit="handleLoginFun"
+          style="width: 500px;"
+          :loading="loading"
+        >
+          <a-form-item
+            label="题目内容"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-textarea
+              placeholder="题目内容"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="20"
+              v-decorator="[
+                'content',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <div class="question-option">
+            <span class="question-option-title">题目选项：</span>
+            <span class="question-option-add" @click="questionOptionAddFun"
+              >新增选项</span
+            >
+          </div>
+          <div
+            class="question-option-list-row"
+            v-for="(item, index) in optionsList"
+            :key="index"
+          >
+            <span
+              v-if="optionsList.length > 1"
+              class="question-option-list-row-delete"
+              @click="questionOptionDeleteFun(index)"
+              >删除</span
+            >
+            <a-form-item
+              label=" "
+              :label-col="labelCol"
+              :wrapper-col="wrapperCol"
+            >
+              <a-input
+                placeholder="填空需与题目一一对应"
+                :maxLength="200"
+                v-decorator="[
+                  `answers${index}`,
+                  {
+                    rules: [
+                      { required: true, message: 'Please input content!' },
+                    ],
+                  },
+                ]"
+              />
+            </a-form-item>
+          </div>
+          <a-form-item
+            label="必学日期"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-date-picker
+              @change="onDateChange"
+              placeholder="请选择日期"
+              v-decorator="[
+                'studyDate',
+                {
+                  rules: [{ required: true, message: 'Please selete date!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="工种类别"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-select
+              v-decorator="[
+                'engineeringWorkChooseValue',
+                {
+                  rules: [{ required: false, message: 'Please selete date!' }],
+                  initialValue: engineeringWorkChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.value"
+                v-for="(item, index) in engineeringWorkList"
+                :key="index"
+              >
+                {{ item.title }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+              type="primary"
+              html-type="submit"
+              style="width: 100%;margin-top: 20px;"
+              >提交</a-button
+            >
+          </a-form-item>
+        </a-form>
+      </a-spin>
     </div>
   </div>
 </template>
 
 <script>
+import { ENGINEERING_WORK_LIST } from '@/common/Constant';
 export default {
   name: 'examQusetionCreateGapFilling',
   props: {},
-  components: {
-    // components: (reslove) => {
-    // require(['', reslove]);
-    // }
-  },
+  components: {},
   data() {
-    return {};
+    return {
+      loading: false, // 是否显示加载动画
+      labelCol: { span: 6 }, // 表单行中label的占位
+      wrapperCol: { span: 18 }, // 表单行中内容的占位
+      loginForm: this.$form.createForm(this, {
+        name: 'examQusetionAddDuoXuan',
+      }),
+      questionType: 'TianKong', // 题目类型：填空题
+      optionsList: [{ value: '' }], // 选项列表
+      engineeringWorkList: [], // 工种数据列表
+      engineeringWorkChooseValue: '', // 所选工种
+      studyDate: '', // 开考时间
+    };
   },
   created() {
-    this.initDataFun(); //初始化数据
+    this.initDataFun(); // 初始化数据
   },
   mounted() {},
   beforeDestroy() {},
   watch: {},
   computed: {},
   methods: {
-    //初始化数据
-    initDataFun() {},
+    // 初始化数据
+    initDataFun() {
+      // 工种类别
+      this.engineeringWorkList = [
+        { title: '不限工种', value: '' },
+        ...ENGINEERING_WORK_LIST,
+      ];
+      this.engineeringWorkChooseValue = this.engineeringWorkList[0].value;
+    },
+    // 操作：新增选项
+    questionOptionAddFun() {
+      this.optionsList.push({ value: '' });
+    },
+    // 操作：删除选项
+    questionOptionDeleteFun(index) {
+      this.optionsList.splice(index, 1);
+    },
+    // 操作：选择日期
+    onDateChange(date, dateString) {
+      if (date) {
+        this.studyDate = dateString;
+      } else {
+        this.studyDate = '';
+      }
+    },
+    // 操作：表单提交
+    handleLoginFun(e) {
+      e.preventDefault();
+      this.loginForm.validateFields((err, values) => {
+        if (!err) {
+          let params = {
+            ...values,
+          };
+          params.studyDate = this.studyDate;
+          this.httpQuestFun(params);
+        }
+      });
+    },
+    // 表单提交请求
+    httpQuestFun(params) {
+      this.loading = true;
+      console.log(params);
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
+      // this.$_http
+      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
+      //   .then((res) => {
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
   },
 };
 </script>
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+</style>

src/views/examQuestionManagement/examQusetionCreateMultiple.vue

@@ -1,40 +1,227 @@
 <template>
   <div class="app-container">
-    <div class="common-card">
-      <div>这里是多选题</div>
-    </div>
-    <div class="common-card a-card-margin-top">
-      <div>这里是内容</div>
+    <div class="common-card exam-question-create-body">
+      <a-spin :spinning="loading">
+        <a-form
+          :form="loginForm"
+          @submit="handleLoginFun"
+          style="width: 500px;"
+          :loading="loading"
+        >
+          <a-form-item
+            label="题目内容"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-textarea
+              placeholder="题目内容"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="20"
+              v-decorator="[
+                'content',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <div class="question-option">
+            <span class="question-option-title">题目选项：</span>
+            <span class="question-option-add" @click="questionOptionAddFun"
+              >新增选项</span
+            >
+          </div>
+          <div
+            class="question-option-list-row"
+            v-for="(item, index) in optionsList"
+            :key="index"
+          >
+            <span
+              v-if="optionsList.length > 2"
+              class="question-option-list-row-delete"
+              @click="questionOptionDeleteFun(index)"
+              >删除</span
+            >
+            <a-form-item
+              :label="index | formatQuestionIndex"
+              :label-col="labelCol"
+              :wrapper-col="wrapperCol"
+            >
+              <a-input
+                placeholder="选项内容"
+                :maxLength="200"
+                v-decorator="[
+                  `answers${index}`,
+                  {
+                    rules: [
+                      { required: true, message: 'Please input content!' },
+                    ],
+                  },
+                ]"
+              />
+            </a-form-item>
+          </div>
+          <a-form-item
+            label="正确答案"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-input
+              placeholder="答案格式为大写字母"
+              :maxLength="200"
+              v-decorator="[
+                'finalAnswer',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="必学日期"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-date-picker
+              @change="onDateChange"
+              placeholder="请选择日期"
+              v-decorator="[
+                'studyDate',
+                {
+                  rules: [{ required: true, message: 'Please selete date!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="工种类别"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-select
+              v-decorator="[
+                'engineeringWorkChooseValue',
+                {
+                  rules: [{ required: false, message: 'Please selete date!' }],
+                  initialValue: engineeringWorkChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.value"
+                v-for="(item, index) in engineeringWorkList"
+                :key="index"
+              >
+                {{ item.title }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+              type="primary"
+              html-type="submit"
+              style="width: 100%;margin-top: 20px;"
+              >提交</a-button
+            >
+          </a-form-item>
+        </a-form>
+      </a-spin>
     </div>
   </div>
 </template>
 
 <script>
+import { ENGINEERING_WORK_LIST } from '@/common/Constant';
 export default {
   name: 'examQusetionCreateMultiple',
   props: {},
-  components: {
-    // components: (reslove) => {
-    // require(['', reslove]);
-    // }
-  },
+  components: {},
   data() {
-    return {};
+    return {
+      loading: false, // 是否显示加载动画
+      labelCol: { span: 6 }, // 表单行中label的占位
+      wrapperCol: { span: 18 }, // 表单行中内容的占位
+      loginForm: this.$form.createForm(this, {
+        name: 'examQusetionAddDuoXuan',
+      }),
+      questionType: 'DuoXuan', // 题目类型：多选题
+      optionsList: [{ value: '' }, { value: '' }], // 选项列表
+      engineeringWorkList: [], // 工种数据列表
+      engineeringWorkChooseValue: '', // 所选工种
+      studyDate: '', // 开考时间
+    };
   },
   created() {
-    this.initDataFun(); //初始化数据
+    this.initDataFun(); // 初始化数据
   },
   mounted() {},
   beforeDestroy() {},
   watch: {},
   computed: {},
   methods: {
-    //初始化数据
-    initDataFun() {},
+    // 初始化数据
+    initDataFun() {
+      // 工种类别
+      this.engineeringWorkList = [
+        { title: '不限工种', value: '' },
+        ...ENGINEERING_WORK_LIST,
+      ];
+      this.engineeringWorkChooseValue = this.engineeringWorkList[0].value;
+    },
+    // 操作：新增选项
+    questionOptionAddFun() {
+      this.optionsList.push({ value: '' });
+    },
+    // 操作：删除选项
+    questionOptionDeleteFun(index) {
+      this.optionsList.splice(index, 1);
+    },
+    // 操作：选择日期
+    onDateChange(date, dateString) {
+      if (date) {
+        this.studyDate = dateString;
+      } else {
+        this.studyDate = '';
+      }
+    },
+    // 操作：表单提交
+    handleLoginFun(e) {
+      e.preventDefault();
+      this.loginForm.validateFields((err, values) => {
+        if (!err) {
+          let params = {
+            ...values,
+          };
+          params.studyDate = this.studyDate;
+          this.httpQuestFun(params);
+        }
+      });
+    },
+    // 表单提交请求
+    httpQuestFun(params) {
+      this.loading = true;
+      console.log(params);
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
+      // this.$_http
+      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
+      //   .then((res) => {
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
   },
 };
 </script>
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+</style>

src/views/examQuestionManagement/examQusetionCreateSingle.vue

@@ -1,86 +1,131 @@
 <template>
   <div class="app-container">
     <div class="common-card exam-question-create-body">
-      <a-form :form="loginForm" @submit="handleLoginFun" style="width: 350px;">
-        <a-form-item>
-          <span>题目内容：</span>
-          <a-input
-            placeholder="题目内容"
-            :maxLength="20"
-            v-decorator="[
-              'content',
-              {
-                rules: [{ required: true, message: 'Please input content!' }],
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="loginForm"
+          @submit="handleLoginFun"
+          style="width: 500px;"
+          :loading="loading"
+        >
+          <a-form-item
+            label="题目内容："
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-textarea
+              placeholder="题目内容"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="20"
+              v-decorator="[
+                'content',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
           <div class="question-option">
             <span class="question-option-title">题目选项：</span>
-            <span class="question-option-add" @click="questionAddFun"
+            <span class="question-option-add" @click="questionOptionAddFun"
               >新增选项</span
             >
           </div>
           <div
-            class="question-option-list"
+            class="question-option-list-row"
             v-for="(item, index) in optionsList"
             :key="index"
           >
-            <span>{{ index | formatQuestionIndex }}</span>
+            <span
+              v-if="optionsList.length > 2"
+              class="question-option-list-row-delete"
+              @click="questionOptionDeleteFun(index)"
+              >删除</span
+            >
+            <a-form-item
+              :label="index | formatQuestionIndex"
+              :label-col="labelCol"
+              :wrapper-col="wrapperCol"
+            >
+              <a-input
+                placeholder="选项内容"
+                :maxLength="200"
+                v-decorator="[
+                  `answers${index}`,
+                  {
+                    rules: [
+                      { required: true, message: 'Please input content!' },
+                    ],
+                  },
+                ]"
+              />
+            </a-form-item>
+          </div>
+          <a-form-item
+            label="正确答案："
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
             <a-input
-              placeholder="题目选项"
-              :maxLength="50"
-              v-model="item.value"
+              placeholder="答案格式为大写字母"
+              :maxLength="200"
+              v-decorator="[
+                'finalAnswer',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
             />
-          </div>
-        </a-form-item>
-        <a-form-item>
-          <span>正确答案：</span>
-          <a-input
-            placeholder="答案格式为大写字母"
-            :maxLength="200"
-            v-decorator="[
-              'answer',
-              {
-                rules: [{ required: true, message: 'Please input content!' }],
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item>
-          <span>必学日期：</span>
-          <a-date-picker
-            @change="onDateChange"
-            v-decorator="[
-              'studyDate',
-              {
-                rules: [{ required: true, message: 'Please selete date!' }],
-              },
-            ]"
-          />
-        </a-form-item>
-        <a-form-item>
-          <span>工种类别</span>
-          <a-select v-model="engineeringWorkChooseValue">
-            <a-select-option
-              :value="item.value"
-              v-for="(item, index) in engineeringWorkList"
-              :key="index"
-            >
-              {{ item.title }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item>
-          <a-button
-            type="primary"
-            html-type="submit"
-            style="width: 100%;margin-top: 20px;"
-            >提交</a-button
+          </a-form-item>
+          <a-form-item
+            label="必学日期："
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-date-picker
+              @change="onDateChange"
+              placeholder="请选择日期"
+              v-decorator="[
+                'studyDate',
+                {
+                  rules: [{ required: true, message: 'Please selete date!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="工种类别："
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
           >
-        </a-form-item>
-      </a-form>
+            <a-select
+              v-decorator="[
+                'engineeringWorkChooseValue',
+                {
+                  rules: [{ required: false, message: 'Please selete date!' }],
+                  initialValue: engineeringWorkChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.value"
+                v-for="(item, index) in engineeringWorkList"
+                :key="index"
+              >
+                {{ item.title }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+              type="primary"
+              html-type="submit"
+              style="width: 100%;margin-top: 20px;"
+              >提交</a-button
+            >
+          </a-form-item>
+        </a-form>
+      </a-spin>
     </div>
   </div>
 </template>
@@ -93,59 +138,76 @@ export default {
   components: {},
   data() {
     return {
-      loginForm: this.$form.createForm(this, { name: 'examQusetionAdd' }),
-      optionsList: [{ value: '' }, { value: '' }],
+      loading: false, // 是否显示加载动画
+      labelCol: { span: 6 }, // 表单行中label的占位
+      wrapperCol: { span: 18 }, // 表单行中内容的占位
+      loginForm: this.$form.createForm(this, {
+        name: 'examQusetionAddDanXuan',
+      }),
+      questionType: 'DanXuan', // 题目类型：单选题
+      optionsList: [{ value: '' }, { value: '' }], // 选项列表
       engineeringWorkList: [], // 工种数据列表
       engineeringWorkChooseValue: '', // 所选工种
-      studyDate: '',
+      studyDate: '', // 开考时间
     };
   },
   created() {
-    this.initDataFun(); //初始化数据
+    this.initDataFun(); // 初始化数据
   },
   mounted() {},
   beforeDestroy() {},
   watch: {},
   computed: {},
   methods: {
-    //初始化数据+
+    // 初始化数据
     initDataFun() {
       // 工种类别
-      this.engineeringWorkList = ENGINEERING_WORK_LIST;
+      this.engineeringWorkList = [
+        { title: '不限工种', value: '' },
+        ...ENGINEERING_WORK_LIST,
+      ];
       this.engineeringWorkChooseValue = this.engineeringWorkList[0].value;
     },
     // 操作：新增选项
-    questionAddFun() {
-      console.log('新增选项');
+    questionOptionAddFun() {
       this.optionsList.push({ value: '' });
     },
+    // 操作：删除选项
+    questionOptionDeleteFun(index) {
+      this.optionsList.splice(index, 1);
+    },
     // 操作：选择日期
     onDateChange(date, dateString) {
-      this.studyDate = dateString;
-      console.log(date, dateString);
+      if (date) {
+        this.studyDate = dateString;
+      } else {
+        this.studyDate = '';
+      }
     },
     // 操作：表单提交
     handleLoginFun(e) {
       e.preventDefault();
       this.loginForm.validateFields((err, values) => {
         if (!err) {
-          console.log(values);
           let params = {
             ...values,
           };
+          params.studyDate = this.studyDate;
           this.httpQuestFun(params);
         }
       });
     },
     // 表单提交请求
     httpQuestFun(params) {
+      this.loading = true;
       console.log(params);
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
       // this.$_http
-      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
+      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
       //   .then((res) => {
       //     console.log(res);
-      //     this.tableData = res.data;
-      //     this.pagination.total = res.pagination.total;
       //   })
       //   .catch((err) => {
       //     console.log(err);
@@ -162,30 +224,4 @@ export default {
 
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';
-.exam-question-create-body {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  .question-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .question-option-title {
-      font-size: 14px;
-      color: #383838;
-    }
-    .question-option-add {
-      font-size: 12px;
-      color: @mainColorBlueNormal;
-      cursor: pointer;
-    }
-  }
-  .question-option-list {
-    display: flex;
-    align-items: center;
-    span {
-      margin-right: @paddingMarginVal;
-    }
-  }
-}
 </style>

src/views/examQuestionManagement/examQusetionCreateTrueOrFalse.vue

@@ -1,40 +1,214 @@
 <template>
   <div class="app-container">
-    <div class="common-card">
-      <div>这里是判断题</div>
-    </div>
-    <div class="common-card a-card-margin-top">
-      <div>这里是内容</div>
+    <div class="common-card exam-question-create-body">
+      <a-spin :spinning="loading">
+        <a-form
+          :form="loginForm"
+          @submit="handleLoginFun"
+          style="width: 500px;"
+          :loading="loading"
+        >
+          <a-form-item
+            label="题目内容"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-textarea
+              placeholder="题目内容"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="20"
+              v-decorator="[
+                'content',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <div class="question-option">
+            <span class="question-option-title">题目选项：</span>
+          </div>
+          <div
+            class="question-option-list-row"
+            v-for="(item, index) in optionsList"
+            :key="index"
+          >
+            <span
+              v-if="optionsList.length > 2"
+              class="question-option-list-row-delete"
+              @click="questionOptionDeleteFun(index)"
+              >删除</span
+            >
+            <a-form-item
+              :label="index | formatQuestionIndex"
+              :label-col="labelCol"
+              :wrapper-col="wrapperCol"
+            >
+              <a-input
+                v-model="item.value"
+                placeholder="选项内容"
+                disabled
+                :maxLength="200"
+              />
+            </a-form-item>
+          </div>
+          <a-form-item
+            label="正确答案"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-input
+              placeholder="答案格式为大写字母"
+              :maxLength="200"
+              v-decorator="[
+                'finalAnswer',
+                {
+                  rules: [{ required: true, message: 'Please input content!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="必学日期"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-date-picker
+              @change="onDateChange"
+              placeholder="请选择日期"
+              v-decorator="[
+                'studyDate',
+                {
+                  rules: [{ required: true, message: 'Please selete date!' }],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="工种类别"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-select
+              v-decorator="[
+                'engineeringWorkChooseValue',
+                {
+                  rules: [{ required: false, message: 'Please selete date!' }],
+                  initialValue: engineeringWorkChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.value"
+                v-for="(item, index) in engineeringWorkList"
+                :key="index"
+              >
+                {{ item.title }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+              type="primary"
+              html-type="submit"
+              style="width: 100%;margin-top: 20px;"
+              >提交</a-button
+            >
+          </a-form-item>
+        </a-form>
+      </a-spin>
     </div>
   </div>
 </template>
 
 <script>
+import { ENGINEERING_WORK_LIST } from '@/common/Constant';
 export default {
   name: 'examQusetionCreateTrueOrFalse',
   props: {},
-  components: {
-    // components: (reslove) => {
-    // require(['', reslove]);
-    // }
-  },
+  components: {},
   data() {
-    return {};
+    return {
+      loading: false, // 是否显示加载动画
+      labelCol: { span: 6 }, // 表单行中label的占位
+      wrapperCol: { span: 18 }, // 表单行中内容的占位
+      loginForm: this.$form.createForm(this, {
+        name: 'examQusetionAddPanDuan',
+      }),
+      questionType: 'PanDuan', // 题目类型：判断题
+      optionsList: [{ value: '正确' }, { value: '错误' }], // 选项列表
+      engineeringWorkList: [], // 工种数据列表
+      engineeringWorkChooseValue: '', // 所选工种
+      studyDate: '', // 开考时间
+    };
   },
   created() {
-    this.initDataFun(); //初始化数据
+    this.initDataFun(); // 初始化数据
   },
   mounted() {},
   beforeDestroy() {},
   watch: {},
   computed: {},
   methods: {
-    //初始化数据
-    initDataFun() {},
+    // 初始化数据
+    initDataFun() {
+      // 工种类别
+      this.engineeringWorkList = [
+        { title: '不限工种', value: '' },
+        ...ENGINEERING_WORK_LIST,
+      ];
+      this.engineeringWorkChooseValue = this.engineeringWorkList[0].value;
+    },
+    // 操作：删除选项
+    questionOptionDeleteFun(index) {
+      this.optionsList.splice(index, 1);
+    },
+    // 操作：选择日期
+    onDateChange(date, dateString) {
+      if (date) {
+        this.studyDate = dateString;
+      } else {
+        this.studyDate = '';
+      }
+    },
+    // 操作：表单提交
+    handleLoginFun(e) {
+      e.preventDefault();
+      this.loginForm.validateFields((err, values) => {
+        if (!err) {
+          let params = {
+            ...values,
+          };
+          params.studyDate = this.studyDate;
+          this.httpQuestFun(params);
+        }
+      });
+    },
+    // 表单提交请求
+    httpQuestFun(params) {
+      this.loading = true;
+      console.log(params);
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
+      // this.$_http
+      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
+      //   .then((res) => {
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
   },
 };
 </script>
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+</style>