|
|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <div id="lookdetail">
|
|
|
+ <detail-frame title="作业题详情页" returns="./index">
|
|
|
+ <data-form :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew">
|
|
|
+ <template #options="{item}">
|
|
|
+ <template v-if="item.model === 'state'">
|
|
|
+ <el-option label="弃用" value="0"></el-option>
|
|
|
+ <el-option label="正常" value="1"></el-option>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template #custom="{ item, form, fieldChange }">
|
|
|
+ <el-button type="text" @click="dialogFormVisible = true">选择题类型</el-button>
|
|
|
+ <el-dialog title="选择题类型" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="form">
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="单选" name="first">
|
|
|
+ <el-button type="text" @click="dialogFormVisible1 = true">增加</el-button>
|
|
|
+
|
|
|
+ <el-dialog title="增加页面" :visible.sync="dialogFormVisible1">
|
|
|
+ <el-form :model="form" label-width="80px">
|
|
|
+ <el-form-item label="序号" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.zuoyeid" autocomplete="off" placeholder="请输入序号" prop="zuoyeid"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.zuoyename" autocomplete="off" placeholder="请输入名称" prop="zuoyename"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="答案" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.answer" autocomplete="off" placeholder="请输入答案" prop="answer"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible1 = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <data-table :fields="fieldss" :data="index" :opera="opera" @edit="toEdit"></data-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="多选" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="问答" name="third">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+ <el-form-item label="问答">
|
|
|
+ <el-input v-model="form.duoxuan" placeholder="请输入问答题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </template>
|
|
|
+ </data-form>
|
|
|
+ </detail-frame>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import dataTable from '@frame/layout/admin/data-table';
|
|
|
+import detailFrame from '@frame/layout/admin/detail-frame';
|
|
|
+import dataForm from '@frame/components/form';
|
|
|
+import upload from '@frame/components/upload';
|
|
|
+export default {
|
|
|
+ metaInfo: { title: '题库详情页' },
|
|
|
+ name: 'lookdetail',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ detailFrame,
|
|
|
+ dataForm,
|
|
|
+ dataTable,
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ activeName: '',
|
|
|
+ dialogTableVisible: false,
|
|
|
+ dialogTableVisible1: false,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ dialogFormVisible1: false,
|
|
|
+ form: {
|
|
|
+ duoxuan: '',
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ zuoyeid: '',
|
|
|
+ zuoyename: '',
|
|
|
+ answer: '',
|
|
|
+ },
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ fieldss: [
|
|
|
+ { label: '序号', required: true, model: 'zuoyeid' },
|
|
|
+ { label: '名称', required: true, model: 'zuoyename' },
|
|
|
+ { label: '答案', required: true, model: 'answer' },
|
|
|
+ ],
|
|
|
+
|
|
|
+ index: [{ zuoyeid: '1' }],
|
|
|
+ fields: [
|
|
|
+ { label: '状态', required: true, model: 'state', type: `select` },
|
|
|
+ { label: '标题', required: true, model: 'title' },
|
|
|
+ { label: '题型', required: true, model: 'type', type: 'tixing', custom: true },
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ zuoyeid: [{ required: true, message: '请输入序号', trigger: 'blur' }],
|
|
|
+ zuoyename: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
+ answer: [{ required: true, message: '请输入答案', trigger: 'blur' }],
|
|
|
+ name: [{ required: true, message: '请输入作业姓名' }],
|
|
|
+ state: [{ required: true, message: '请选择状态' }],
|
|
|
+ tixing: [{ required: true, message: '请选择题类型' }],
|
|
|
+ title: [{ required: true, message: '请选择标题' }],
|
|
|
+ },
|
|
|
+ }),
|
|
|
+ created() {},
|
|
|
+ computed: {
|
|
|
+ isNew() {
|
|
|
+ return this.$route.query.id ? false : true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search({ skip = 0, limit = 15, ...info } = {}) {
|
|
|
+ console.log(`in search`);
|
|
|
+ },
|
|
|
+ toEdit(data) {
|
|
|
+ console.log(`in toEdit`);
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+
|
|
|
+ uploadSuccess() {},
|
|
|
+ async handleSave({ isNew, data }) {
|
|
|
+ console.log(isNew);
|
|
|
+ console.log(data);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-tabs__nav-wrap::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.el-tabs__active-bar {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+/deep/.el-tabs__item.is-active {
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+/deep/.el-input__inner {
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+}
|
|
|
+</style>
|
