关于vue.js:vuecli2-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>