vue-cli2 components组件的使用

<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>

refer.vue

<template>
    <!-- 查看参考的dialog -->
    <el-dialog
    title="参考"
    :visible.sync="referVisible"
    v-if="referVisible"
    :before-close="close"
    width="50%"
    >
        <div class="refer">
            <p>1.220-A：题目220选择A的时候显示</p>
            <p>2.220-A || 220-B ：题目220选择A或者B时显示</p>
            <p>3.220-A && 220-B ：题目220选择A和B时显示</p>
            <p>4.220-!A：题目220不选择A时显示</p>
            <p>5.220-notEmpty：题目220不为空时显示</p>
            <p>6.240-equal[A,B,C]：题目240选择A,B,C显示</p>
            <p>7.240-contain[A,B,C]：题目240选择包含A,B,C时显示</p>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>

import { Rules } from "@admin/mixin/rules";
import { AdminApi } from "@admin/api/";

export default {
  name: "Refer",
  props: {
    referVisible: {
      type: Boolean,
    },
    closeRefer: {
      type: Function,
    },
  },
  data(){
      return {
        pageName:"refer",
      }
  },
  methods:{
    close() {
      this.$emit("closeRefer");
    },
  }
  
}
</script>
<style scoped lang="less">
    .refer {
        p {
            line-height:30px;
            padding-left:5px;
        }
    }
</style>