调整样式,修复bug

master
yujialong 3 years ago
parent f2c8e318fa
commit 991656906c
  1. 218
      src/views/Transaction.vue
  2. 3
      vue.config.js

@ -68,7 +68,7 @@
<p class="p">操作一致性规则用户完成的功能操作与下方设置的操作点一致</p> <p class="p">操作一致性规则用户完成的功能操作与下方设置的操作点一致</p>
<div class="tree-con"> <div class="tree-con">
<div class="block"> <div class="block">
<el-tree <my-tree
class="action" class="action"
:ref="'tree-'+scope.$index" :ref="'tree-'+scope.$index"
:data="treeData" :data="treeData"
@ -79,7 +79,7 @@
@check-change="(data, checked, indeterminate) => { @check-change="(data, checked, indeterminate) => {
handleCheckChange(data, checked, indeterminate, scope.row, scope.$index); handleCheckChange(data, checked, indeterminate, scope.row, scope.$index);
}" }"
></el-tree> ></my-tree>
</div> </div>
<div v-show="scope.row.isDisabled" class="mask"></div> <div v-show="scope.row.isDisabled" class="mask"></div>
</div> </div>
@ -108,119 +108,131 @@
<div class="block"> <div class="block">
<!-- type: 题目类型(1选择 2判断 3填空 4问答 5指标结果) --> <!-- type: 题目类型(1选择 2判断 3填空 4问答 5指标结果) -->
<template v-if="scope.row.type == 1"> <template v-if="scope.row.type == 1">
<div class="line"> <div class="box">
<div>{{ scope.row.name }}</div> <div class="line">
</div> <div>{{ scope.row.name }}</div>
<div class="line"> </div>
<span class="label mini">正确答案</span> <div class="line">
<div class="action"> <span class="label mini">正确答案</span>
<!--multiple:多选--> <div class="action">
<el-select <!--multiple:多选-->
v-model="scope.row.value1" <el-select
:disabled="isView || scope.row.isDisabled" v-model="scope.row.value1"
size="mini" :disabled="isView || scope.row.isDisabled"
style="width: 100%" size="mini"
> style="width: 100%"
<el-option >
v-for="(item, index) in scope.row.items" <el-option
:key="index" v-for="(item, index) in scope.row.items"
:label="item.options" :key="index"
:value="item.itemId" :label="item.options"
></el-option> :value="item.itemId"
</el-select> ></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
</template> </template>
<template v-if="scope.row.type == 2"> <template v-if="scope.row.type == 2">
<div class="line"> <div class="box">
<div>{{ scope.row.name }}</div> <div class="line">
</div> <div>{{ scope.row.name }}</div>
<div class="line"> </div>
<span class="label mini">正确答案</span> <div class="line">
<div class="action"> <span class="label mini">正确答案</span>
<el-select <div class="action">
v-model="scope.row.value1" <el-select
:disabled="isView || scope.row.isDisabled" v-model="scope.row.value1"
size="mini" :disabled="isView || scope.row.isDisabled"
style="width: 100%" size="mini"
> style="width: 100%"
<el-option >
v-for="(item, index) in scope.row.items" <el-option
:key="index" v-for="(item, index) in scope.row.items"
:label="item.options" :key="index"
:value="item.itemId" :label="item.options"
></el-option> :value="item.itemId"
</el-select> ></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
</template> </template>
<template v-if="scope.row.type == 3"> <template v-if="scope.row.type == 3">
<div class="line"> <div class="box">
<div class="line" style="min-height: 100%;">
<span class="label"> <span class="label">
<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox> <!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>-->
字段要求
</span> </span>
<div class="action"> <div class="action">
<el-input <el-input
class="mini-textarea" class="mini-textarea"
type="textarea" type="textarea"
rows="6" rows="6"
size="mini" size="mini"
v-model.trim="scope.row.value1" v-model.trim="scope.row.value1"
:disabled="isView || scope.row.isDisabled" :disabled="isView || scope.row.isDisabled"
></el-input> ></el-input>
</div>
</div> </div>
</div> </div>
</template> </template>
<template v-if="scope.row.type == 4"> <template v-if="scope.row.type == 4">
<div class="line"> <div class="box">
<div class="line">
<span class="label"> <span class="label">
<el-checkbox v-model="scope.row.numOfWords" :disabled="isView || scope.row.isDisabled">字数要求</el-checkbox> <!--<el-checkbox v-model="scope.row.numOfWords" :disabled="isView || scope.row.isDisabled">字数要求</el-checkbox>-->
字数要求
</span> </span>
<div class="action a-line"> <div class="action a-line">
<el-select <el-select
v-model="scope.row.value1" v-model="scope.row.value1"
:disabled="isView || scope.row.isDisabled" :disabled="isView || scope.row.isDisabled"
size="mini" size="mini"
> >
<el-option label=">" value=">"></el-option> <el-option label=">" value=">"></el-option>
<el-option label="<" value="<"></el-option> <el-option label="<" value="<"></el-option>
<el-option label="=" value="="></el-option> <el-option label="=" value="="></el-option>
<el-option label=">=" value=">="></el-option> <el-option label=">=" value=">="></el-option>
<el-option label="<=" value="<="></el-option> <el-option label="<=" value="<="></el-option>
<el-option label="无限制" value="无限制"></el-option> <el-option label="无限制" value="无限制"></el-option>
</el-select> </el-select>
<el-input <el-input
class="number-input" class="number-input"
v-model.trim="scope.row.value2" v-model.trim="scope.row.value2"
:disabled="isView || scope.row.isDisabled" :disabled="isView || scope.row.isDisabled"
type="number" type="number"
min="1" min="1"
size="mini" size="mini"
style="margin-left: 5px;" style="margin-left: 5px;"
></el-input> ></el-input>
</div>
</div> </div>
</div> <div class="line">
<div class="line"> <span class="label">
<span class="label"> <!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>-->
<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox> 字段要求
</span> </span>
<div class="action"> <div class="action">
<el-input <el-input
class="mini-textarea" class="mini-textarea"
type="textarea" type="textarea"
rows="5" rows="5"
size="mini" size="mini"
v-model.trim="scope.row.value3" v-model.trim="scope.row.value3"
:disabled="isView || scope.row.isDisabled" :disabled="isView || scope.row.isDisabled"
></el-input> ></el-input>
</div>
</div> </div>
</div> </div>
</template> </template>
<template v-if="scope.row.type == 5"> <template v-if="scope.row.type == 5">
<div class="box">
<div class="line"> <div class="line">
<!-- <!--
<span class="label">选择指标</span> <span class="label">选择指标</span>
@ -279,6 +291,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
</div> </div>
</template> </template>
@ -288,7 +301,7 @@
<el-button v-show="scope.row.isDisabled" size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button> <el-button v-show="scope.row.isDisabled" size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button v-show="!scope.row.isDisabled" size="mini" type="text" @click="handleSave(scope.row, scope.$index)">保存</el-button> <el-button v-show="!scope.row.isDisabled" size="mini" type="text" @click="handleSave(scope.row, scope.$index)">保存</el-button>
<el-button v-show="!scope.row.isDisabled" size="mini" type="text" @click="handleCancel(scope.row, scope.$index)">取消</el-button> <el-button v-show="!scope.row.isDisabled" size="mini" type="text" @click="handleCancel(scope.row, scope.$index)">取消</el-button>
<el-button size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button> <el-button v-show="scope.row.isDisabled" size="mini" type="text" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -300,9 +313,10 @@
<script> <script>
import quill from '@/components/quill' import quill from '@/components/quill'
import MyTree from '@/components/myTree/src/tree'
import {deepCopy} from '@/utils/deepCopy' import {deepCopy} from '@/utils/deepCopy'
export default { export default {
components: {quill}, components: {quill, MyTree},
data() { data() {
return { return {
lcId: "", // id lcId: "", // id
@ -434,6 +448,11 @@ export default {
handleCheckChange(data, checked, indeterminate, row, index) { // handleCheckChange(data, checked, indeterminate, row, index) { //
if (checked && data.isNode === 1) { if (checked && data.isNode === 1) {
this.tableData[index].operationIds = data.id; // id this.tableData[index].operationIds = data.id; // id
row.value1 = "";
row.value2 = "";
row.value3 = "";
row.value4 = "";
row.value5 = "";
if (data.subjectId) { // id if (data.subjectId) { // id
this.currentNodeData = data; this.currentNodeData = data;
this.$refs[`tree-${index}`].setCheckedNodes([data]); this.$refs[`tree-${index}`].setCheckedNodes([data]);
@ -464,6 +483,9 @@ export default {
data.forEach(item => { data.forEach(item => {
if (item.isNode === 0) { if (item.isNode === 0) {
item.disabled = true; item.disabled = true;
item.showCheckbox = false;
} else {
item.showCheckbox = true;
} }
if (item.children && item.children.length) { if (item.children && item.children.length) {
item.id = `${parentId},${item.id}`; item.id = `${parentId},${item.id}`;
@ -829,13 +851,15 @@ export default {
height: 230px; height: 230px;
background-color: #fff; background-color: #fff;
overflow: auto; overflow: auto;
.box{
padding: 0 24px;
}
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 24px 0; margin: 12px 0;
.label { .label {
width: 100px; //width: 100px;
margin-right: 10px; margin-right: 10px;
text-align: right; text-align: right;
font-size: 12px; font-size: 12px;

@ -20,9 +20,10 @@ module.exports = {
} }
}, },
publicPath: '/', publicPath: process.env.NODE_ENV === "development" ? "./" : "",
outputDir: 'dist', outputDir: 'dist',
assetsDir: 'static', assetsDir: 'static',
lintOnSave: true,
devServer: { devServer: {
port: 8087 port: 8087
} }

Loading…
Cancel
Save