<template xmlns:el-form-item="http://www.w3.org/1999/xhtml">
? <el-form ref="form" :model="form" :rules="rules" label-width="100px">
? ? <el-page-header content="詳情頁主題" @back="goBack" />
? ? <el-row style="margin-top: 30px">
? ? ? <!--基本輸入框-->
? ? ? <el-col :span="8">
? ? ? ? <el-form-item label="屬性1" prop="name1">
? ? ? ? ? <el-input v-model="form.model1" placeholder="提示輸入內容" :readonly="status"/>
? ? ? ? </el-form-item>
? ? ? </el-col>
? ? ? <!--基本單選框-->
? ? ? <el-col :span="8">
? ? ? ? <el-form-item label="屬性2" prop="name2">
? ? ? ? ? <el-select v-model="form.model2" class="whiteSelectBg" placeholder="提示單選" style="width: 100%;" :disabled="status">
? ? ? ? ? ? <el-option label="選項1" value="1" />
? ? ? ? ? ? <el-option label="選項2" value="2" />
? ? ? ? ? </el-select>
? ? ? ? </el-form-item>
? ? ? </el-col>
? ? ? <!--基本多選框-->
? ? ? <el-col :span="8">
? ? ? ? <el-form-item label="屬性3" placeholder="" prop="subjectId">
? ? ? ? ? <el-select v-model="form.model3" multiple placeholder="提示多選" style="width: 100%;" @change="getOption">
? ? ? ? ? ? <el-option v-for="option in options" :key="option.id" :label="option.name" :value="option.id" />
? ? ? ? ? </el-select>
? ? ? ? </el-form-item>
? ? ? </el-col>
? ? </el-row>
? ? <!--上傳文件-->
? ? <el-row>
? ? ? <el-upload :disabled="status" action="文件上傳的controller路徑" :on-success="uploadSuccess" :before-upload="beforeUpload" :show-file-list="false"
? ? ? >
? ? ? ? <el-col :span="20">
? ? ? ? ? <el-form-item label="文件類型名" prop="fileName">
? ? ? ? ? ? <el-input v-model="form.fileName" placeholder="請上傳實驗指導，可以上傳doc,docx,pdf等文檔格式" readonly style="width: 750px;" />
? ? ? ? ? </el-form-item>
? ? ? ? </el-col>
? ? ? ? <el-col :span="4">
? ? ? ? ? <el-button type="primary" icon="el-icon-upload" style="margin-left: 25px;" :disabled="status">上傳文件</el-button>
? ? ? ? </el-col>
? ? ? </el-upload>
? ? </el-row>
? ? <!--數(shù)據(jù)表格-->
? ? <el-row>
? ? ? <el-col :span="24">
? ? ? ? <el-form-item>
? ? ? ? ? <el-table v-loading="listLoading" :data="form.tableList" border fit highlight-current-row style="width: 100%;" class="tb-edit" @row-click="tableChange">
? ? ? ? ? ? <el-table-column align="center" :label="序號" type="index" width="80"/>
? ? ? ? ? ? <!--普通數(shù)據(jù)格-->
? ? ? ? ? ? <el-table-column :label="表頭1" align="center" min-width="100px">
? ? ? ? ? ? ? <template slot-scope="{row}">
? ? ? ? ? ? ? ? <span>{{ row.id }}</span>
? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <!--可編輯數(shù)據(jù)格，根據(jù)數(shù)據(jù)狀態(tài)變換輸入還是只顯示-->
? ? ? ? ? ? <el-table-column :label="表頭2" align="center" min-width="100px">
? ? ? ? ? ? ? <template slot-scope="{row}">
? ? ? ? ? ? ? ? <el-input v-if="row.seen" ref="tableInput" v-model="row.name" autofocus="autofocus" maxlength="5" @change="tableEdit(row.$index, row)" />
? ? ? ? ? ? ? ? <span v-else>{{ row.name }}</span>
? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <!--操作按鈕格-->
? ? ? ? ? ? <el-table-column :label="'操作'" align="center" min-width="100px">
? ? ? ? ? ? ? <template slot-scope="{row}">
? ? ? ? ? ? ? ? <el-button size="mini" type="danger" @click="delete(row.id)">刪除</el-button>
? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? </el-table>
? ? ? ? </el-form-item>
? ? ? </el-col>
? ? </el-row>
? ? <!--基礎動態(tài)表單區(qū)塊-->
? ? <el-card class="box-card" shadow="never" style="margin-left: 100px;">
? ? ? <div slot="header" class="clearfix">
? ? ? ? <span>區(qū)塊名</span>
? ? ? ? <el-button type="primary" v-if="addBt" style="margin-left: 700px;" :disabled="status" @click="addCard">新增</el-button>
? ? ? </div>
? ? ? <div style="text-align: center;">
? ? ? ? <el-row v-for="(card, index) in cards" :key="card.key">
? ? ? ? ? <el-col :span="8">
? ? ? ? ? ? <el-form-item :label="屬性1">
? ? ? ? ? ? ? <!--根據(jù)需求自己選擇放輸入框還是單選多選框-->
? ? ? ? ? ? </el-form-item>
? ? ? ? ? </el-col>
? ? ? ? ? <el-col :span="8">
? ? ? ? ? ? <el-form-item :label="屬性2">
? ? ? ? ? ? ? <!--根據(jù)需求自己選擇放輸入框還是單選多選框-->
? ? ? ? ? ? </el-form-item>
? ? ? ? ? </el-col>
? ? ? ? ? <el-col :span="8">
? ? ? ? ? ? <el-button :disabled="status" @click.prevent="deleteCard(card)">刪除</el-button>
? ? ? ? ? ? <el-button :disabled="status" @click="addCard">新增</el-button>
? ? ? ? ? </el-col>
? ? ? ? </el-row>
? ? ? </div>
? ? </el-card>
? ? <el-row>
? ? ? <el-form-item style="text-align: center; margin-top: 30px; margin-left: -30px">
? ? ? ? <el-button type="primary" @click="submit">提交</el-button>
? ? ? ? <el-button @click="reset('form')">重置</el-button>
? ? ? ? <el-button @click="goBack">返回</el-button>
? ? ? </el-form-item>
? ? </el-row> ??
? </el-form>
</template>

<script>
import waves from '@/directive/waves' // waves directive,點擊產生水波紋效果,在標簽中添加 v-waves
import Pagination from '@/components/Pagination' // 分頁組件

export default {
? data() {
? ? return {
? ? ? id: '',
? ? ? options: [],
? ? ? guideFileIsChange: '',
? ? ? guideFile: { file: '', name: '' },
? ? ? listLoading: false,
? ? ? addBt: true,
? ? ? form: {
? ? ? ? model1: '',
? ? ? ? model2: '',
? ? ? ? model3: [],
? ? ? ? fileName: '',
? ? ? ? tableList: [{
? ? ? ? ? id: '',
? ? ? ? ? name: '',
? ? ? ? ? seen: false,
? ? ? ? },{
? ? ? ? ? id: '',
? ? ? ? ? name: '',
? ? ? ? ? seen: false,
? ? ? ? }]
? ? ? ? cards: [], ? ??
? ? ? },
? ? },
? ? rules: {
? ? ? 'model1': [{
? ? ? ? ? required: true,
? ? ? ? ? message: '請輸入內容'
? ? ? ? }],
? ? ? 'model2': [{
? ? ? ? ? required: true,
? ? ? ? ? message: '請選擇選項'
? ? ? ? }],
? ? ? 'model3': [{
? ? ? ? ? required: true,
? ? ? ? ? message: '請選擇選項'
? ? ? ? }],?
? ? ? 'fileName': [{
? ? ? ? ? required: true,
? ? ? ? ? message: '請上傳文件'
? ? ? ? }],
? ? },
? },
? // 頁面初始化
? created() {
? ? // 獲取上一個頁面?zhèn)鬟f過來的參數(shù)，id，狀態(tài)等。。。
? ? this.id = this.$route.query.id
? ? this.action = this.$route.query.action
? },
? methods: {
? ? // 跳轉返回指定的頁面
? ? goBack() {
? ? ? this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews
? ? ? ? .findIndex(item => item.path ===
? ? ? ? ? this.$route.path), 1)
? ? ? this.$router.push({
? ? ? ? path: '跳轉的頁面路徑'
? ? ? })
? ? },
? ? getOption() {
? ? ? // 獲取動態(tài)選項框的數(shù)據(jù)
? ? ? const list = []
? ? ? this.options = list
? ? },
? ? // 上傳文件
? ? uploadSuccess(res, file) {
? ? ? this.guideFileIsChange = '1'
? ? ? this.guideFile.file = file.raw
? ? ? this.guideFile.name = file.raw.name
? ? ? this.form.fileName = file.raw.name
? ? },
? ? // 實驗指導書的信息
? ? beforeUpload(file) {
? ? ? setTimeout(() => {
? ? ? ? this.$message({
? ? ? ? ? duration: 1600,
? ? ? ? ? type: 'success',
? ? ? ? ? message: '上傳文件成功！'
? ? ? ? })
? ? ? })
? ? ? return true
? ? },
? ? tableChange() {
? ? ? console.log('點擊表格行觸發(fā)的操作')
? ? },
? ? // 觸發(fā)出現(xiàn)輸入框
? ? tableEdit(row.$index, row) {
? ? ? for (const index in this.tableList) {
? ? ? ? if (row.id !== this.tableList[index].id) {
? ? ? ? ? this.tableList[index].seen = false
? ? ? ? } else {
? ? ? ? ? this.tableList[index].seen === false ? this.tableList[index].seen = true : this.tableList[index].seen = false
? ? ? ? }
? ? ? }
? ? ? if (row.seen === true) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.tableInput.focus()
? ? ? ? }, 100)
? ? ? }
? ? },
? ? delete(id) {
? ? ? this.$confirm('確認刪除這一條信息？', '確認刪除？', {
? ? ? ? distinguishCancelAndClose: true,
? ? ? ? confirmButtonText: '確定',
? ? ? ? cancelButtonText: '取消'
? ? ? }).then(() => {
? ? ? ? for (let i = 0; i < this.tableList.length; i++) {
? ? ? ? ? if (id === this.tableList[i].id) {
? ? ? ? ? ? this.tableList.splice(i, 1)
? ? ? ? ? }
? ? ? ? }
? ? ? ? this.$message.success('刪除成功！')
? ? ? }).catch(action => {})
? ? },
? ? addCard() {
? ? ? this.cards.push({key1: value1, key2: value2})
? ? ? this.addBt = false
? ? },
? ? deleteCard(card) {
? ? ? const index = this.cards.indexOf(card)
? ? ? if (index !== -1) {
? ? ? ? this.cards.splice(index, 1)
? ? ? } if (this.cards.length === 0) {
? ? ? ? this.addBt = true
? ? ? }
? ? },
? ? submit() {
? ? ? console.log('提交！')
? ? },
? ? reset(formName) {
? ? ? this.$refs[formName].resetFields()
? ? },
? },
}

// 這是修改過得輸入框只讀的樣式
<style>
? .whiteSelectBg .el-input.is-disabled .el-input__inner{
? ? background-color: white;
? ? color:#606266;
? }
</style>