<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-lx-cascades"></i> 体系配置
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container" v-if="hasObject('options')">
<div class="handle-box">
<el-form @submit.native.prevent>
<el-input
v-model="query.keyword"
placeholder="id"
class="handle-input mr10"
@keyup.enter.native="search"
>
</el-input>
<el-select
v-model="query.tab"
placeholder="类别"
class="handle-select mr10"
>
<el-option key=""label=" 全副 "value=""> 全副 </el-option>
<el-option
v-for="(item, key) in options.checkSystemTab"
:key="key"
:label="item"
:value="key"
>
{{item}}
</el-option>
</el-select>
<el-select
v-model="query.tpl"
placeholder="模板"
class="handle-select-tpl mr10"
>
<el-option
v-for="(item, key) in options.webConfigKV['tpl']"
:key="key"
:label="item"
:value="key"
>
{{item}}
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="search"
> 搜寻 </el-button
>
<el-button type="primary" @click="addCheck"> 增加 </el-button>
<el-button type="primary" @click="eximportVisible = true"
> 导入导出 </el-button
>
<el-button type="primary" @click="referVisible = true"> 查看参考 </el-button>
</el-form>
</div>
<el-table
:data="tableData"
:cell-style="{background:'#fff'}"
border
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column
prop="id"
label="ID"
width="100"
align="center"
></el-table-column>
<el-table-column
prop="control"
label="管制项"
min-width="200"
></el-table-column>
<el-table-column prop="desc" label="形容" width="250"></el-table-column>
<el-table-column
prop="purpose"
label="查看目标"
width="250"
></el-table-column>
<el-table-column label="类别" width="100">
<template slot-scope="scope">
{{options.checkSystemTab[scope.row.tab] || "" }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="editCheck(scope.row.id,'edit')"
></el-button>
<el-button
type="text"
icon="el-icon-view"
:title="'预览法律依据 [' + scope.row.id + ']'"
@click="editCheck(scope.row.id,'previewLaw')"
>
</el-button>
<el-button
type="text"
icon="el-icon-view"
:title="'预览规范根据 [' + scope.row.id + ']'"
@click="editCheck(scope.row.id,'previewStandard')"
></el-button>
<el-button
type="text"
icon="el-icon-close"
title="删除"
@click="removeCheck(scope.row.id)"
></el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="parseInt(query.page) || 0"
:page-size="parseInt(query.limit) || 0"
:total="parseInt(query.total) || 0"
@current-change="toPage"
>
</el-pagination>
</div>
</div>
<el-dialog :title="dialogTitle" :visible.sync="popVisible" v-if="popVisible" width="80%">
<el-form
:ref="pageName"
:rules="rules"
:model="check"
label-width="100px"
>
<el-form-item label="ID" prop="id">
<el-input v-model="check.id"></el-input>
</el-form-item>
<el-form-item label="管制项" prop="control">
<el-input v-model="check.control"></el-input>
</el-form-item>
<el-form-item label="形容" prop="desc">
<el-input v-model="check.desc"></el-input>
</el-form-item>
<el-form-item label="查看目标" prop="purpose">
<el-input v-model="check.purpose"></el-input>
</el-form-item>
<el-form-item label="危险条件" prop="dangerConditions">
<TableDangerCondition :options="options" :instance="check">
</TableDangerCondition>
</el-form-item>
<el-form-item label="存在条件" prop="conditions">
<el-input
:value="JSON.stringify(check.conditions)"
@input="handleChange($event,'conditions')"
></el-input>
</el-form-item>
<el-form-item label="相干问题" prop="source">
<el-input
:value="JSON.stringify(check.source)"
@input="handleChange($event,'source')"
></el-input>
</el-form-item>
<el-form-item label="类别" prop="tab">
<el-select v-model="check.tab" width="100">
<el-option
v-for="(item, key) in options.checkSystemTab"
:key="key"
:value="key"
:label="item"
>{{item}}</el-option
></el-select
>
</el-form-item>
<el-form-item label="规范根据" prop="standard">
<Editor :content="check.standard" ref="standardEditor"></Editor>
</el-form-item>
<el-form-item label="法律依据" prop="law">
<Editor :content="check.law" ref="lawEditor"></Editor>
</el-form-item>
<el-form-item label="模板" prop="tpl">
<el-select v-model="check.tpl" class="handle-select-tpl">
<el-option
v-for="(item, key) in options.webConfigKV['tpl']"
:key="key"
:value="key"
:label="item"
>{{item}}</el-option
></el-select
>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="popVisible = false"> 取 消 </el-button>
<el-button type="primary" @click="saveCheck"> 确 定 </el-button>
</span>
</el-dialog>
<el-dialog
title="预览法律依据"
:visible.sync="previewVisibleLaw"
width="50%"
>
<div v-html="check.law" class="preview-html"></div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="previewVisibleLaw = false"
> 确 定 </el-button
>
</span>
</el-dialog>
<el-dialog
title="预览规范根据"
:visible.sync="previewVisibleStardard"
width="50%"
>
<div v-html="check.standard" class="preview-html"></div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="previewVisibleStardard = false"
> 确 定 </el-button
>
</span>
</el-dialog>
<ExImport
:options="options"
:eximportVisible="eximportVisible"
@closeExImport="closeExImport"
:source="pageName"
></ExImport>
<!-- 参考模态框 -->
<Refer :referVisible="referVisible" @closeRefer="closeRefer"></Refer>
</div>
</template>
<script>
import {Common} from "@admin/mixin/common";
import {Has} from "@admin/mixin/has";
import {Rules} from "@admin/mixin/rules";
import {Library} from "@admin/mixin/library";
import Editor from "../common/editor";
import TableDangerCondition from "./tableDangerCondition.vue";
import ExImport from "./eximport.vue";
import Refer from "./refer.vue";
export default {mixins: [Common, Rules, Has, Library],
name: "CheckSystem",
components: {
Editor,
TableDangerCondition,
ExImport,
Refer,
},
data() {
return {
pageName: "checkSystem",
check: {},
rulesInfo: {
id: "请输出 id",
control: "请输出管制项",
desc: "请输出形容",
purpose: "请输出查看目标",
tpl: "请抉择模板",
},
};
},
methods: {handleChange(e, field) {this.check[field] = JSON.parse(e);
},
},
mounted() {this.getCheckDict();
},
};
</script>