仇子明 / bxhd-vue3 · 提交

转到一个项目

作者 xiaoqiu
提交 4bd3d669b8f74027c54338036e9c7dc23197e6fd 1 个父辈 5bdcf1fd

增加了富文本编辑器以及完成配置中心

内嵌 并排对比
正在显示 13 个修改的文件 包含 1229 行增加 和 42 行删除
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 "@vueup/vue-quill": "^1.2.0", 19 "@vueup/vue-quill": "^1.2.0",
20 "@vueuse/core": "9.5.0", 20 "@vueuse/core": "9.5.0",
21 "axios": "0.27.2", 21 "axios": "0.27.2",
  22 + "compressorjs": "^1.2.1",
22 "echarts": "5.4.0", 23 "echarts": "5.4.0",
23 "element-plus": "2.2.21", 24 "element-plus": "2.2.21",
24 "file-saver": "2.0.5", 25 "file-saver": "2.0.5",
@@ -27,8 +28,6 @@ @@ -27,8 +28,6 @@
27 "jsencrypt": "3.3.1", 28 "jsencrypt": "3.3.1",
28 "nprogress": "0.2.0", 29 "nprogress": "0.2.0",
29 "pinia": "2.0.22", 30 "pinia": "2.0.22",
30 - "quill-image-drop-module": "^1.0.3",  
31 - "quill-image-resize-module": "^3.0.0",  
32 "vue": "3.2.45", 31 "vue": "3.2.45",
33 "vue-cropper": "1.0.3", 32 "vue-cropper": "1.0.3",
34 "vue-router": "4.1.4" 33 "vue-router": "4.1.4"
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727146119933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5842" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M837.872941 220.862745h-32.928627a351.774118 351.774118 0 0 1-119.065098-20.078431 569.022745 569.022745 0 0 1-130.108236-71.077647l-20.078431-13.854118a42.566275 42.566275 0 0 0-49.995294 0l-20.078431 14.255686a495.134118 495.134118 0 0 1-127.096471 69.471373 328.282353 328.282353 0 0 1-116.454902 21.283137H186.729412a43.168627 43.168627 0 0 0-42.967843 42.967843v285.716079a369.242353 369.242353 0 0 0 368.439215 368.439215 369.443137 369.443137 0 0 0 368.037647-368.439215v-285.113726A43.369412 43.369412 0 0 0 837.872941 220.862745z m12.247843 328.081569a338.120784 338.120784 0 1 1-676.241568 0V263.42902a13.05098 13.05098 0 0 1 13.05098-12.850196h34.334118a359.80549 359.80549 0 0 0 128.501961-23.692549 528.464314 528.464314 0 0 0 134.52549-73.687844l20.078431-14.255686a12.649412 12.649412 0 0 1 14.858039 0l20.078432 13.653333a613.596863 613.596863 0 0 0 137.135686 74.691765 389.320784 389.320784 0 0 0 129.305098 23.290981h32.928627a12.850196 12.850196 0 0 1 12.649412 12.850196z" fill="#e6e6e6" p-id="5843"></path><path d="M682.666667 414.418824l-198.977255 193.355294-102.199216-102.4a15.058824 15.058824 0 0 0-21.283137 21.283137l107.620392 107.620392a22.688627 22.688627 0 0 0 16.062745 6.625882 22.287059 22.287059 0 0 0 15.661177-6.425098L702.745098 435.902745a15.058824 15.058824 0 0 0 0-21.283137 15.058824 15.058824 0 0 0-20.078431-0.200784z" fill="#e6e6e6" p-id="5844"></path></svg>
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727144945213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2472" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M380 704h264c4.4 0 8-3.6 8-8v-84c0-4.4-3.6-8-8-8h-40c-4.4 0-8 3.6-8 8v36H428v-36c0-4.4-3.6-8-8-8h-40c-4.4 0-8 3.6-8 8v84c0 4.4 3.6 8 8 8z" p-id="2473" fill="#ffffff"></path><path d="M760 581m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="2474" fill="#ffffff"></path><path d="M959 413.4L935.3 372c-2.2-3.8-7.1-5.1-10.9-2.9l-50.7 29.6-78.3-216.2c-8.5-26.5-33.1-44.4-60.9-44.4H301.2c-34.7 0-65.5 22.4-76.2 55.5l-74.6 205.2-50.8-29.6c-3.8-2.2-8.7-0.9-10.9 2.9L65 413.4c-2.2 3.8-0.9 8.6 2.9 10.8l60.4 35.2-14.5 40c-1.2 3.2-1.8 6.6-1.8 10V857.6c0 15.7 11.8 28.4 26.3 28.4h67.6c12.3 0 23-9.3 25.6-22.3l7.7-37.7h545.6l7.7 37.7c2.7 13 13.3 22.3 25.6 22.3h67.6c14.5 0 26.3-12.7 26.3-28.4V509.4c0-3.4-0.6-6.8-1.8-10l-14.5-40 60.3-35.2c3.8-2.2 5.1-7 3-10.8zM840 517v237H184V517l15.6-43h624.8l15.6 43zM292.7 218.1l0.5-1.3 0.4-1.3c1.1-3.3 4.1-5.5 7.6-5.5h427.6l75.4 208H220l72.7-199.9z" p-id="2475" fill="#ffffff"></path><path d="M264 581m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="2476" fill="#ffffff"></path></svg>
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727145399547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4191" data-spm-anchor-id="a313x.search_index.0.i12.79d43a81NjX0Ze" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M885.76 296.448H138.24c-5.632 0-10.24 4.608-10.24 10.24v408.064c0 5.632 4.608 10.24 10.24 10.24h747.52c5.632 0 10.24-4.608 10.24-10.24V306.688c0-5.632-4.608-10.24-10.24-10.24zM184.32 693.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6 25.6 11.264 25.6 25.6-11.264 25.6-25.6 25.6z m0-315.392c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6 25.6 11.264 25.6 25.6-11.264 25.6-25.6 25.6zM299.52 599.04c0 16.384-10.752 27.136-27.136 27.136s-27.136-13.824-27.136-27.136V421.376c0-16.384 13.824-27.136 27.136-27.136s27.136 13.824 27.136 27.136V599.04z m105.984 0c0 16.384-10.752 27.136-27.136 27.136s-27.136-13.824-27.136-27.136V421.376c0-16.384 13.824-27.136 27.136-27.136 16.384 0 27.136 13.824 27.136 27.136V599.04z m177.152 0c0 16.384-13.824 27.136-27.136 27.136-16.384 0-27.136-13.824-27.136-27.136V421.376c0-16.384 13.824-27.136 27.136-27.136 16.384 0 27.136 13.824 27.136 27.136V599.04z m95.744 0c0 16.384-10.752 27.136-27.136 27.136-16.384 0-27.136-13.824-27.136-27.136V421.376c0-16.384 13.824-27.136 27.136-27.136 16.384 0 27.136 13.824 27.136 27.136V599.04z m95.744 0c0 16.384-10.752 27.136-27.136 27.136s-27.136-13.824-27.136-27.136V421.376c0-16.384 13.824-27.136 27.136-27.136 13.824 0 27.136 13.824 27.136 27.136V599.04z m65.024 94.72c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6 25.6 11.264 25.6 25.6-11.776 25.6-25.6 25.6z m0-315.392c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6 25.6 11.264 25.6 25.6-11.776 25.6-25.6 25.6z" fill="#ffffff" p-id="4192" data-spm-anchor-id="a313x.search_index.0.i11.79d43a81NjX0Ze" class="selected"></path><path d="M885.76 245.248H138.24c-33.792 0-61.44 27.648-61.44 61.44v408.064c0 33.792 27.648 61.44 61.44 61.44h747.52c33.792 0 61.44-27.648 61.44-61.44V306.688c0-33.792-27.648-61.44-61.44-61.44z m10.24 469.504c0 5.632-4.608 10.24-10.24 10.24H138.24c-5.632 0-10.24-4.608-10.24-10.24V306.688c0-5.632 4.608-10.24 10.24-10.24h747.52c5.632 0 10.24 4.608 10.24 10.24v408.064z" p-id="4193" fill="#e6e6e6"></path><path d="M184.32 352.768m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="4194" fill="#e6e6e6"></path><path d="M184.32 668.16m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="4195" fill="#e6e6e6"></path><path d="M839.168 352.768m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="4196" fill="#e6e6e6"></path><path d="M839.168 668.16m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" p-id="4197" fill="#e6e6e6"></path><path d="M271.872 394.24c-13.824 0-27.136 10.752-27.136 27.136V599.04c0 13.824 10.752 27.136 27.136 27.136s27.136-10.752 27.136-27.136V421.376c0.512-13.312-13.312-27.136-27.136-27.136zM378.368 394.24c-13.824 0-27.136 10.752-27.136 27.136V599.04c0 13.824 10.752 27.136 27.136 27.136s27.136-10.752 27.136-27.136V421.376c0-13.312-10.752-27.136-27.136-27.136zM555.008 394.24c-13.824 0-27.136 10.752-27.136 27.136V599.04c0 13.824 10.752 27.136 27.136 27.136 13.824 0 27.136-10.752 27.136-27.136V421.376c0.512-13.312-10.752-27.136-27.136-27.136zM650.752 394.24c-13.824 0-27.136 10.752-27.136 27.136V599.04c0 13.824 10.752 27.136 27.136 27.136 16.384 0 27.136-10.752 27.136-27.136V421.376c0.512-13.312-10.752-27.136-27.136-27.136zM747.008 394.24c-13.824 0-27.136 10.752-27.136 27.136V599.04c0 13.824 10.752 27.136 27.136 27.136s27.136-10.752 27.136-27.136V421.376c0-13.312-13.824-27.136-27.136-27.136z" p-id="4198" fill="#e6e6e6" data-spm-anchor-id="a313x.search_index.0.i10.79d43a81NjX0Ze" class=""></path></svg>
  1 +<template>
  2 + <div>
  3 + <QuillEditor
  4 + ref="myQuillEditor"
  5 + theme="snow"
  6 + v-model:content="content"
  7 + :options="data.editorOption"
  8 + contentType="html"
  9 + @update:content="setValue()"
  10 + />
  11 + <!-- 使用自定义图片上传 -->
  12 + <input
  13 + type="file"
  14 + hidden
  15 + accept=".jpg,.png"
  16 + ref="fileBtn"
  17 + @change="handleUpload"
  18 + />
  19 + </div>
  20 +</template>
  21 +
  22 +<script setup>
  23 +import { QuillEditor } from "@vueup/vue-quill";
  24 +import "@vueup/vue-quill/dist/vue-quill.snow.css";
  25 +import { reactive, onMounted, ref, toRaw, watch } from "vue";
  26 +// import { backsite } from '@/api'
  27 +
  28 +const props = defineProps(["value"]);
  29 +const emit = defineEmits(["updateValue"]);
  30 +const content = ref("");
  31 +const myQuillEditor = ref();
  32 +// watch(() => props.value, (val) => {
  33 +// console.log(toRaw(myQuillEditor.value))
  34 +// toRaw(myQuillEditor.value).setHTML(val)
  35 +// }, { deep: true })
  36 +const fileBtn = ref();
  37 +const data = reactive({
  38 + content: "",
  39 + editorOption: {
  40 + modules: {
  41 + toolbar: [
  42 + ["bold", "italic", "underline", "strike"],
  43 + [{ size: ["small", false, "large", "huge"] }],
  44 + [{ font: [] }],
  45 + [{ align: [] }],
  46 + [{ list: "ordered" }, { list: "bullet" }],
  47 + [{ indent: "-1" }, { indent: "+1" }],
  48 + [{ header: 1 }, { header: 2 }],
  49 + ["image"],
  50 + [{ direction: "rtl" }],
  51 + [{ color: [] }, { background: [] }],
  52 + ],
  53 + },
  54 + placeholder: "请输入内容...",
  55 + },
  56 +});
  57 +const imgHandler = (state) => {
  58 + if (state) {
  59 + fileBtn.value.click();
  60 + }
  61 +};
  62 +const setValue = () => {
  63 + const text = toRaw(myQuillEditor.value).getHTML();
  64 + emit("updateValue", text);
  65 +};
  66 +const handleUpload = (e) => {
  67 + const files = Array.prototype.slice.call(e.target.files);
  68 + console.log(files, "files");
  69 + if (!files) {
  70 + return;
  71 + }
  72 + const formdata = new FormData();
  73 + formdata.append("file", files[0]);
  74 + const quill = toRaw(myQuillEditor.value).getQuill();
  75 + const length = quill.getSelection().index;
  76 + // 插入图片，res为服务器返回的图片链接地址
  77 + quill.insertEmbed(
  78 + length,
  79 + "image",
  80 + "https://img.zcool.cn/community/0159645d5a2f40a80120695c8d54fc.jpg@1280w_1l_2o_100sh.jpg"
  81 + );
  82 + // 调整光标到最后
  83 + quill.setSelection(length + 1);
  84 + // backsite.uploadFile(formdata)
  85 + // .then(res => {
  86 + // if (res.data.url) {
  87 + // const quill = toRaw(myQuillEditor.value).getQuill()
  88 + // const length = quill.getSelection().index
  89 + // // 插入图片，res为服务器返回的图片链接地址
  90 + // quill.insertEmbed(length, 'image', res.data.url)
  91 + // // 调整光标到最后
  92 + // quill.setSelection(length + 1)
  93 + // }
  94 + // })
  95 +};
  96 +onMounted(() => {
  97 + const quill = toRaw(myQuillEditor.value).getQuill();
  98 + if (myQuillEditor.value) {
  99 + quill.getModule("toolbar").addHandler("image", imgHandler);
  100 + }
  101 + toRaw(myQuillEditor.value).setHTML(props.value);
  102 +});
  103 +</script>
  104 +<style scoped lang="scss">
  105 +:deep(.ql-editor) {
  106 + min-height: 180px;
  107 +}
  108 +:deep(.ql-formats) {
  109 + height: 21px;
  110 + line-height: 21px;
  111 +}
  112 +</style>
@@ -27,6 +27,8 @@ import './permission' // permission control @@ -27,6 +27,8 @@ import './permission' // permission control
27 import { useDict } from '@/utils/dict' 27 import { useDict } from '@/utils/dict'
28 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi' 28 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
29 29
  30 +// 富文本编辑器
  31 +import QuillEditor from '@/components/QuillEditor'
30 // 分页组件 32 // 分页组件
31 import Pagination from '@/components/Pagination' 33 import Pagination from '@/components/Pagination'
32 // 自定义表格工具组件 34 // 自定义表格工具组件
@@ -56,6 +58,7 @@ app.config.globalProperties.selectDictLabels = selectDictLabels @@ -56,6 +58,7 @@ app.config.globalProperties.selectDictLabels = selectDictLabels
56 58
57 // 全局组件挂载 59 // 全局组件挂载
58 app.component('DictTag', DictTag) 60 app.component('DictTag', DictTag)
  61 +app.component('QuillEditor', QuillEditor)
59 app.component('Pagination', Pagination) 62 app.component('Pagination', Pagination)
60 app.component('TreeSelect', TreeSelect) 63 app.component('TreeSelect', TreeSelect)
61 app.component('FileUpload', FileUpload) 64 app.component('FileUpload', FileUpload)
1 <template> 1 <template>
2 - <div>车辆型号</div> 2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + :inline="true"
  8 + label-width="68px"
  9 + >
  10 + <el-form-item label="车辆品牌" prop="brandName">
  11 + <el-input
  12 + v-model="queryParams.brandName"
  13 + placeholder="填写车辆品牌"
  14 + clearable
  15 + style="width: 220px"
  16 + @keyup.enter="handleQuery"
  17 + />
  18 + </el-form-item>
  19 + <el-form-item label="车辆型号" prop="modelName">
  20 + <el-input
  21 + v-model="queryParams.modelName"
  22 + placeholder="填写车辆型号"
  23 + clearable
  24 + style="width: 220px"
  25 + @keyup.enter="handleQuery"
  26 + />
  27 + </el-form-item>
  28 + <el-form-item>
  29 + <el-button type="primary" icon="Search" @click="handleQuery"
  30 + >查询</el-button
  31 + >
  32 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  33 + </el-form-item>
  34 + </el-form>
  35 + <el-row :gutter="10" class="mb8">
  36 + <el-col :span="1.5">
  37 + <el-button
  38 + type="primary"
  39 + plain
  40 + icon="Plus"
  41 + v-hasPermi="['system:role:add']"
  42 + @click="handleAdd"
  43 + >新增</el-button
  44 + >
  45 + </el-col>
  46 + <el-col :span="1.5">
  47 + <el-button
  48 + type="danger"
  49 + plain
  50 + icon="Delete"
  51 + :disabled="multiple"
  52 + v-hasPermi="['system:role:remove']"
  53 + @click="handleDelete"
  54 + >删除</el-button
  55 + >
  56 + </el-col>
  57 + <el-col :span="1.5">
  58 + <el-button
  59 + type="info"
  60 + plain
  61 + icon="Upload"
  62 + @click="handleImport"
  63 + v-hasPermi="['system:user:import']"
  64 + >导入</el-button
  65 + >
  66 + </el-col>
  67 + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
  68 + </el-row>
  69 +
  70 + <!-- 表格数据 -->
  71 + <el-table
  72 + v-loading="loading"
  73 + :data="dataList"
  74 + @selection-change="handleSelectionChange"
  75 + >
  76 + <el-table-column type="selection" width="55" align="center" />
  77 + <el-table-column
  78 + label="序号"
  79 + prop="policyId"
  80 + width="120"
  81 + align="center"
  82 + />
  83 + <el-table-column label="车辆品牌" prop="brandName" align="center" />
  84 + <el-table-column label="车辆型号" prop="modelName" align="center" />
  85 + <el-table-column label="操作时间" prop="authTime" align="center" />
  86 + <el-table-column
  87 + label="操作人"
  88 + prop="editAuth"
  89 + width="100"
  90 + align="center"
  91 + />
  92 + <el-table-column
  93 + label="操作"
  94 + fixed="right"
  95 + align="center"
  96 + prop="Feedback"
  97 + >
  98 + <template #default="{ row }">
  99 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  100 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
  101 + </template>
  102 + </el-table-column>
  103 + </el-table>
  104 +
  105 + <pagination
  106 + v-show="total > 0"
  107 + :total="total"
  108 + v-model:page="queryParams.pageNum"
  109 + v-model:limit="queryParams.pageSize"
  110 + />
  111 +
  112 + <!-- 添加或修改车辆性质配置对话框 -->
  113 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  114 + <el-form ref="natureRef" :model="form" :rules="rules" label-width="120px">
  115 + <el-form-item label="车辆品牌" prop="brandName">
  116 + <el-input v-model="form.brandName" placeholder="请输入车辆性质名称" />
  117 + </el-form-item>
  118 + <el-form-item label="车辆型号" prop="modelName">
  119 + <el-input v-model="form.modelName" placeholder="请输入车辆性质名称" />
  120 + </el-form-item>
  121 + </el-form>
  122 + <template #footer>
  123 + <div class="dialog-footer">
  124 + <el-button type="primary" @click="submitForm">确 定</el-button>
  125 + <el-button @click="cancel">取 消</el-button>
  126 + </div>
  127 + </template>
  128 + </el-dialog>
  129 +
  130 + <!-- 用户导入对话框 -->
  131 + <el-dialog
  132 + :title="upload.title"
  133 + v-model="upload.open"
  134 + width="400px"
  135 + append-to-body
  136 + >
  137 + <el-upload
  138 + ref="uploadRef"
  139 + :limit="1"
  140 + accept=".xlsx, .xls"
  141 + :headers="upload.headers"
  142 + :action="upload.url + '?updateSupport=' + upload.updateSupport"
  143 + :disabled="upload.isUploading"
  144 + :on-progress="handleFileUploadProgress"
  145 + :on-success="handleFileSuccess"
  146 + :auto-upload="false"
  147 + drag
  148 + >
  149 + <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  150 + <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  151 + <template #tip>
  152 + <div class="el-upload__tip text-center">
  153 + <div class="el-upload__tip">
  154 + <el-checkbox
  155 + v-model="upload.updateSupport"
  156 + />是否更新已经存在的型号数据
  157 + </div>
  158 + <span>仅允许导入xls、xlsx格式文件。</span>
  159 + <el-link
  160 + type="primary"
  161 + :underline="false"
  162 + style="font-size: 12px; vertical-align: baseline"
  163 + @click="importTemplate"
  164 + >下载模板</el-link
  165 + >
  166 + </div>
  167 + </template>
  168 + </el-upload>
  169 + <template #footer>
  170 + <div class="dialog-footer">
  171 + <el-button type="primary" @click="submitFileForm">确 定</el-button>
  172 + <el-button @click="upload.open = false">取 消</el-button>
  173 + </div>
  174 + </template>
  175 + </el-dialog>
  176 + </div>
3 </template> 177 </template>
4 178
5 -<script>  
6 -export default {}; 179 +<script setup>
  180 +import { getToken } from "@/utils/auth";
  181 +const { proxy } = getCurrentInstance();
  182 +/*** 型号导入参数 */
  183 +const upload = reactive({
  184 + // 是否显示弹出层（用户导入）
  185 + open: false,
  186 + // 弹出层标题（用户导入）
  187 + title: "",
  188 + // 是否禁用上传
  189 + isUploading: false,
  190 + // 是否更新已经存在的用户数据
  191 + updateSupport: 0,
  192 + // 设置上传的请求头部
  193 + headers: { Authorization: "Bearer " + getToken() },
  194 + // 上传的地址
  195 + url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData",
  196 +});
  197 +const dataList = ref([
  198 + {
  199 + policyId: "1",
  200 + brandName: "阿尔法-罗密欧",
  201 + modelName: "156 4C Giulietta Mito",
  202 + authTime: "2024-09-24 11:53:43",
  203 + editAuth: "admin",
  204 + },
  205 + {
  206 + policyId: "2",
  207 + brandName: "梅赛德斯-AMG",
  208 + modelName: "C63AMG CLSAMG G63AMG S65AMG SL63AMG",
  209 + authTime: "2024-09-24 11:53:43",
  210 + editAuth: "admin",
  211 + },
  212 + {
  213 + policyId: "3",
  214 + brandName: "阿斯顿-马丁",
  215 + modelName: "DB9Cygnet DBS V12 Vantage V12 Zagato 一汽奥迪",
  216 + authTime: "2024-09-24 11:53:43",
  217 + editAuth: "admin",
  218 + },
  219 +]);
  220 +const open = ref(false);
  221 +const multiple = ref(true);
  222 +const loading = ref(false);
  223 +const total = ref(5);
  224 +const title = ref("");
  225 +const ids = ref([]);
  226 +const form = ref({});
  227 +const rules = ref({
  228 + natureName: [
  229 + { required: true, message: "角色名称不能为空", trigger: "blur" },
  230 + ],
  231 +});
  232 +const queryParams = reactive({
  233 + pageNum: 1,
  234 + pageSize: 10,
  235 + brandName: undefined,
  236 + modelName: undefined,
  237 +});
  238 +
  239 +/**文件上传中处理 */
  240 +const handleFileUploadProgress = (event, file, fileList) => {
  241 + upload.isUploading = true;
  242 +};
  243 +/** 文件上传成功处理 */
  244 +const handleFileSuccess = (response, file, fileList) => {
  245 + upload.open = false;
  246 + upload.isUploading = false;
  247 + proxy.$refs["uploadRef"].handleRemove(file);
  248 + proxy.$alert(
  249 + "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
  250 + response.msg +
  251 + "</div>",
  252 + "导入结果",
  253 + { dangerouslyUseHTMLString: true }
  254 + );
  255 + // getList();
  256 +};
  257 +/** 导入按钮操作 */
  258 +function handleImport() {
  259 + upload.title = "型号导入";
  260 + upload.open = true;
  261 +}
  262 +/** 下载模板操作 */
  263 +function importTemplate() {
  264 + proxy.download(
  265 + "system/user/importTemplate",
  266 + {},
  267 + `user_template_${new Date().getTime()}.xlsx`
  268 + );
  269 +}
  270 +/** 添加车辆性质 */
  271 +function handleAdd() {
  272 + reset();
  273 + open.value = true;
  274 + title.value = "添加车辆性质";
  275 +}
  276 +/** 修改角色 */
  277 +function handleUpdate(row) {
  278 + reset();
  279 + form.value = row;
  280 + title.value = "修改车辆性质";
  281 + open.value = true;
  282 +}
  283 +
  284 +/** 删除按钮操作 */
  285 +function handleDelete(row) {
  286 + const natureIds = row.natureId || ids.value;
  287 + proxy.$modal
  288 + .confirm('是否确认删除车辆性质编号为"' + natureIds + '"的数据项?')
  289 + .then(function () {
  290 + // return delRole(natureIds);
  291 + proxy.$modal.msgSuccess("删除成功");
  292 + });
  293 +}
  294 +/** 提交上传文件 */
  295 +function submitFileForm() {
  296 + proxy.$refs["uploadRef"].submit();
  297 +}
  298 +/** 重置新增的表单以及其他数据 */
  299 +function reset() {
  300 + form.value = {
  301 + natureId: undefined,
  302 + typeName: undefined,
  303 + authTime: undefined,
  304 + editAuth: undefined,
  305 + };
  306 + proxy.resetForm("natureRef");
  307 +}
  308 +
  309 +/** 多选框选中数据 */
  310 +function handleSelectionChange(selection) {
  311 + ids.value = selection.map((item) => item.roleId);
  312 + multiple.value = !selection.length;
  313 +}
  314 +
  315 +/** 搜索按钮操作 */
  316 +function handleQuery() {}
  317 +
  318 +/** 重置按钮操作 */
  319 +function resetQuery() {
  320 + proxy.resetForm("queryRef");
  321 +}
  322 +
  323 +/** 提交按钮 */
  324 +function submitForm() {
  325 + proxy.$refs["natureRef"].validate((valid) => {
  326 + if (valid) {
  327 + if (form.value.natureId != undefined) {
  328 + proxy.$modal.msgSuccess("修改成功");
  329 + } else {
  330 + proxy.$modal.msgSuccess("新增成功");
  331 + }
  332 + }
  333 + });
  334 +}
  335 +/** 取消按钮 */
  336 +function cancel() {
  337 + open.value = false;
  338 + reset();
  339 +}
7 </script> 340 </script>
8 341
9 <style></style> 342 <style></style>
1 <template> 1 <template>
2 - <div>车辆性质管理</div> 2 + <div class="app-container">
  3 + <el-row :gutter="10" class="mb8">
  4 + <el-col :span="1.5">
  5 + <el-button
  6 + type="primary"
  7 + plain
  8 + icon="Plus"
  9 + v-hasPermi="['system:role:add']"
  10 + @click="handleAdd"
  11 + >新增</el-button
  12 + >
  13 + </el-col>
  14 + <el-col :span="1.5">
  15 + <el-button
  16 + type="danger"
  17 + plain
  18 + icon="Delete"
  19 + :disabled="multiple"
  20 + v-hasPermi="['system:role:remove']"
  21 + @click="handleDelete"
  22 + >删除</el-button
  23 + >
  24 + </el-col>
  25 + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
  26 + </el-row>
  27 +
  28 + <!-- 表格数据 -->
  29 + <el-table
  30 + v-loading="loading"
  31 + :data="dataList"
  32 + @selection-change="handleSelectionChange"
  33 + >
  34 + <el-table-column type="selection" width="55" align="center" />
  35 + <el-table-column
  36 + label="序号"
  37 + prop="policyId"
  38 + width="120"
  39 + align="center"
  40 + />
  41 + <el-table-column label="车辆性质名称" prop="natureName" align="center" />
  42 + <el-table-column label="操作时间" prop="authTime" align="center" />
  43 + <el-table-column label="操作人" prop="editAuth" align="center" />
  44 + <el-table-column
  45 + label="操作"
  46 + fixed="right"
  47 + align="center"
  48 + prop="Feedback"
  49 + >
  50 + <template #default="{ row }">
  51 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  52 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
  53 + </template>
  54 + </el-table-column>
  55 + </el-table>
  56 +
  57 + <pagination
  58 + v-show="total > 0"
  59 + :total="total"
  60 + v-model:page="queryParams.pageNum"
  61 + v-model:limit="queryParams.pageSize"
  62 + />
  63 +
  64 + <!-- 添加或修改车辆性质配置对话框 -->
  65 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  66 + <el-form ref="natureRef" :model="form" :rules="rules" label-width="120px">
  67 + <el-form-item label="车辆性质名称" prop="natureName">
  68 + <el-input
  69 + v-model="form.natureName"
  70 + placeholder="请输入车辆性质名称"
  71 + />
  72 + </el-form-item>
  73 + </el-form>
  74 + <template #footer>
  75 + <div class="dialog-footer">
  76 + <el-button type="primary" @click="submitForm">确 定</el-button>
  77 + <el-button @click="cancel">取 消</el-button>
  78 + </div>
  79 + </template>
  80 + </el-dialog>
  81 + </div>
3 </template> 82 </template>
4 83
5 -<script>  
6 -export default {}; 84 +<script setup>
  85 +const { proxy } = getCurrentInstance();
  86 +const dataList = ref([
  87 + {
  88 + policyId: "1",
  89 + natureName: "营运车辆",
  90 + authTime: "2024-09-24 11:53:43",
  91 + editAuth: "admin",
  92 + },
  93 + {
  94 + policyId: "2",
  95 + natureName: "公务车辆",
  96 + authTime: "2024-09-24 11:53:43",
  97 + editAuth: "admin",
  98 + },
  99 + {
  100 + policyId: "3",
  101 + natureName: "私家车",
  102 + authTime: "2024-09-24 11:53:43",
  103 + editAuth: "admin",
  104 + },
  105 +]);
  106 +const open = ref(false);
  107 +const multiple = ref(true);
  108 +const loading = ref(false);
  109 +const total = ref(5);
  110 +const title = ref("");
  111 +const ids = ref([]);
  112 +const form = ref({});
  113 +const rules = ref({
  114 + natureName: [
  115 + { required: true, message: "角色名称不能为空", trigger: "blur" },
  116 + ],
  117 +});
  118 +const queryParams = reactive({
  119 + pageNum: 1,
  120 + pageSize: 10,
  121 +});
  122 +
  123 +/** 添加车辆性质 */
  124 +function handleAdd() {
  125 + reset();
  126 + open.value = true;
  127 + title.value = "添加车辆性质";
  128 +}
  129 +/** 修改角色 */
  130 +function handleUpdate(row) {
  131 + reset();
  132 + form.value = row;
  133 + title.value = "修改车辆性质";
  134 + open.value = true;
  135 +}
  136 +
  137 +/** 删除按钮操作 */
  138 +function handleDelete(row) {
  139 + const natureIds = row.natureId || ids.value;
  140 + proxy.$modal
  141 + .confirm('是否确认删除车辆性质编号为"' + natureIds + '"的数据项?')
  142 + .then(function () {
  143 + // return delRole(natureIds);
  144 + proxy.$modal.msgSuccess("删除成功");
  145 + });
  146 +}
  147 +
  148 +/** 重置新增的表单以及其他数据 */
  149 +function reset() {
  150 + form.value = {
  151 + natureId: undefined,
  152 + natureName: undefined,
  153 + authTime: undefined,
  154 + editAuth: undefined,
  155 + };
  156 + proxy.resetForm("natureRef");
  157 +}
  158 +
  159 +/** 多选框选中数据 */
  160 +function handleSelectionChange(selection) {
  161 + ids.value = selection.map((item) => item.roleId);
  162 + multiple.value = !selection.length;
  163 +}
  164 +
  165 +/** 提交按钮 */
  166 +function submitForm() {
  167 + proxy.$refs["natureRef"].validate((valid) => {
  168 + if (valid) {
  169 + if (form.value.natureId != undefined) {
  170 + proxy.$modal.msgSuccess("修改成功");
  171 + } else {
  172 + proxy.$modal.msgSuccess("新增成功");
  173 + }
  174 + }
  175 + });
  176 +}
  177 +/** 取消按钮 */
  178 +function cancel() {
  179 + open.value = false;
  180 + reset();
  181 +}
7 </script> 182 </script>
8 183
9 <style></style> 184 <style></style>
1 <template> 1 <template>
2 - <div>号牌种类</div> 2 + <div class="app-container">
  3 + <el-row :gutter="10" class="mb8">
  4 + <el-col :span="1.5">
  5 + <el-button
  6 + type="primary"
  7 + plain
  8 + icon="Plus"
  9 + v-hasPermi="['system:role:add']"
  10 + @click="handleAdd"
  11 + >新增</el-button
  12 + >
  13 + </el-col>
  14 + <el-col :span="1.5">
  15 + <el-button
  16 + type="danger"
  17 + plain
  18 + icon="Delete"
  19 + :disabled="multiple"
  20 + v-hasPermi="['system:role:remove']"
  21 + @click="handleDelete"
  22 + >删除</el-button
  23 + >
  24 + </el-col>
  25 + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
  26 + </el-row>
  27 +
  28 + <!-- 表格数据 -->
  29 + <el-table
  30 + v-loading="loading"
  31 + :data="dataList"
  32 + @selection-change="handleSelectionChange"
  33 + >
  34 + <el-table-column type="selection" width="55" align="center" />
  35 + <el-table-column
  36 + label="序号"
  37 + prop="policyId"
  38 + width="120"
  39 + align="center"
  40 + />
  41 + <el-table-column label="号牌种类名称" prop="numSort" align="center" />
  42 + <el-table-column label="操作时间" prop="authTime" align="center" />
  43 + <el-table-column label="操作人" prop="editAuth" align="center" />
  44 + <el-table-column
  45 + label="操作"
  46 + fixed="right"
  47 + align="center"
  48 + prop="Feedback"
  49 + >
  50 + <template #default="{ row }">
  51 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  52 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
  53 + </template>
  54 + </el-table-column>
  55 + </el-table>
  56 +
  57 + <pagination
  58 + v-show="total > 0"
  59 + :total="total"
  60 + v-model:page="queryParams.pageNum"
  61 + v-model:limit="queryParams.pageSize"
  62 + />
  63 +
  64 + <!-- 添加或修改车辆性质配置对话框 -->
  65 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  66 + <el-form ref="natureRef" :model="form" :rules="rules" label-width="120px">
  67 + <el-form-item label="号牌种类名称" prop="numSort">
  68 + <el-input v-model="form.numSort" placeholder="请输入号牌种类名称" />
  69 + </el-form-item>
  70 + </el-form>
  71 + <template #footer>
  72 + <div class="dialog-footer">
  73 + <el-button type="primary" @click="submitForm">确 定</el-button>
  74 + <el-button @click="cancel">取 消</el-button>
  75 + </div>
  76 + </template>
  77 + </el-dialog>
  78 + </div>
3 </template> 79 </template>
4 80
5 -<script>  
6 -export default {}; 81 +<script setup>
  82 +const { proxy } = getCurrentInstance();
  83 +const dataList = ref([
  84 + {
  85 + policyId: "1",
  86 + numSort: "蓝色车牌",
  87 + authTime: "2024-09-24 11:53:43",
  88 + editAuth: "admin",
  89 + },
  90 + {
  91 + policyId: "2",
  92 + numSort: "黄色车牌",
  93 + authTime: "2024-09-24 11:53:43",
  94 + editAuth: "admin",
  95 + },
  96 + {
  97 + policyId: "3",
  98 + numSort: "白色色车牌",
  99 + authTime: "2024-09-24 11:53:43",
  100 + editAuth: "admin",
  101 + },
  102 +]);
  103 +const open = ref(false);
  104 +const multiple = ref(true);
  105 +const loading = ref(false);
  106 +const total = ref(5);
  107 +const title = ref("");
  108 +const ids = ref([]);
  109 +const form = ref({});
  110 +const rules = ref({
  111 + numSort: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
  112 +});
  113 +const queryParams = reactive({
  114 + pageNum: 1,
  115 + pageSize: 10,
  116 +});
  117 +
  118 +/** 添加车辆性质 */
  119 +function handleAdd() {
  120 + reset();
  121 + open.value = true;
  122 + title.value = "添加号牌种类";
  123 +}
  124 +/** 修改角色 */
  125 +function handleUpdate(row) {
  126 + reset();
  127 + form.value = row;
  128 + title.value = "修改号牌种类";
  129 + open.value = true;
  130 +}
  131 +
  132 +/** 删除按钮操作 */
  133 +function handleDelete(row) {
  134 + const natureIds = row.natureId || ids.value;
  135 + proxy.$modal
  136 + .confirm('是否确认删除车辆性质编号为"' + natureIds + '"的数据项?')
  137 + .then(function () {
  138 + // return delRole(natureIds);
  139 + proxy.$modal.msgSuccess("删除成功");
  140 + });
  141 +}
  142 +
  143 +/** 重置新增的表单以及其他数据 */
  144 +function reset() {
  145 + form.value = {
  146 + natureId: undefined,
  147 + numSort: undefined,
  148 + authTime: undefined,
  149 + editAuth: undefined,
  150 + };
  151 + proxy.resetForm("natureRef");
  152 +}
  153 +
  154 +/** 多选框选中数据 */
  155 +function handleSelectionChange(selection) {
  156 + ids.value = selection.map((item) => item.roleId);
  157 + multiple.value = !selection.length;
  158 +}
  159 +
  160 +/** 提交按钮 */
  161 +function submitForm() {
  162 + proxy.$refs["natureRef"].validate((valid) => {
  163 + if (valid) {
  164 + if (form.value.natureId != undefined) {
  165 + proxy.$modal.msgSuccess("修改成功");
  166 + } else {
  167 + proxy.$modal.msgSuccess("新增成功");
  168 + }
  169 + }
  170 + });
  171 +}
  172 +/** 取消按钮 */
  173 +function cancel() {
  174 + open.value = false;
  175 + reset();
  176 +}
7 </script> 177 </script>
8 178
9 <style></style> 179 <style></style>
1 <template> 1 <template>
2 - <div>车辆类型</div> 2 + <div class="app-container">
  3 + <!-- 筛选条件 -->
  4 + <el-form
  5 + :model="queryParams"
  6 + ref="queryRef"
  7 + :inline="true"
  8 + label-width="68px"
  9 + >
  10 + <el-form-item label="车辆类型" prop="typeName">
  11 + <el-input
  12 + v-model="queryParams.typeName"
  13 + placeholder="填写车辆类型"
  14 + clearable
  15 + style="width: 220px"
  16 + @keyup.enter="handleQuery"
  17 + />
  18 + </el-form-item>
  19 + <el-form-item>
  20 + <el-button type="primary" icon="Search" @click="handleQuery"
  21 + >查询</el-button
  22 + >
  23 + <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  24 + </el-form-item>
  25 + </el-form>
  26 + <el-row :gutter="10" class="mb8">
  27 + <el-col :span="1.5">
  28 + <el-button
  29 + type="primary"
  30 + plain
  31 + icon="Plus"
  32 + v-hasPermi="['system:role:add']"
  33 + @click="handleAdd"
  34 + >新增</el-button
  35 + >
  36 + </el-col>
  37 + <el-col :span="1.5">
  38 + <el-button
  39 + type="danger"
  40 + plain
  41 + icon="Delete"
  42 + :disabled="multiple"
  43 + v-hasPermi="['system:role:remove']"
  44 + @click="handleDelete"
  45 + >删除</el-button
  46 + >
  47 + </el-col>
  48 + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
  49 + </el-row>
  50 +
  51 + <!-- 表格数据 -->
  52 + <el-table
  53 + v-loading="loading"
  54 + :data="dataList"
  55 + @selection-change="handleSelectionChange"
  56 + >
  57 + <el-table-column type="selection" width="55" align="center" />
  58 + <el-table-column
  59 + label="序号"
  60 + prop="policyId"
  61 + width="120"
  62 + align="center"
  63 + />
  64 + <el-table-column label="车辆类型" prop="typeName" align="center" />
  65 + <el-table-column label="操作时间" prop="authTime" align="center" />
  66 + <el-table-column label="操作人" prop="editAuth" align="center" />
  67 + <el-table-column
  68 + label="操作"
  69 + fixed="right"
  70 + align="center"
  71 + prop="Feedback"
  72 + >
  73 + <template #default="{ row }">
  74 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  75 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
  76 + </template>
  77 + </el-table-column>
  78 + </el-table>
  79 +
  80 + <pagination
  81 + v-show="total > 0"
  82 + :total="total"
  83 + v-model:page="queryParams.pageNum"
  84 + v-model:limit="queryParams.pageSize"
  85 + />
  86 +
  87 + <!-- 添加或修改车辆性质配置对话框 -->
  88 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  89 + <el-form ref="natureRef" :model="form" :rules="rules" label-width="120px">
  90 + <el-form-item label="车辆类型名称" prop="typeName">
  91 + <el-input v-model="form.typeName" placeholder="请输入车辆性质名称" />
  92 + </el-form-item>
  93 + </el-form>
  94 + <template #footer>
  95 + <div class="dialog-footer">
  96 + <el-button type="primary" @click="submitForm">确 定</el-button>
  97 + <el-button @click="cancel">取 消</el-button>
  98 + </div>
  99 + </template>
  100 + </el-dialog>
  101 + </div>
3 </template> 102 </template>
4 103
5 -<script>  
6 -export default {}; 104 +<script setup>
  105 +const { proxy } = getCurrentInstance();
  106 +const dataList = ref([
  107 + {
  108 + policyId: "1",
  109 + typeName: "小型车",
  110 + authTime: "2024-09-24 11:53:43",
  111 + editAuth: "admin",
  112 + },
  113 + {
  114 + policyId: "2",
  115 + typeName: "高级车型",
  116 + authTime: "2024-09-24 11:53:43",
  117 + editAuth: "admin",
  118 + },
  119 + {
  120 + policyId: "3",
  121 + typeName: "三厢车型",
  122 + authTime: "2024-09-24 11:53:43",
  123 + editAuth: "admin",
  124 + },
  125 +]);
  126 +const open = ref(false);
  127 +const multiple = ref(true);
  128 +const loading = ref(false);
  129 +const total = ref(5);
  130 +const title = ref("");
  131 +const ids = ref([]);
  132 +const form = ref({});
  133 +const rules = ref({
  134 + natureName: [
  135 + { required: true, message: "角色名称不能为空", trigger: "blur" },
  136 + ],
  137 +});
  138 +const queryParams = reactive({
  139 + pageNum: 1,
  140 + pageSize: 10,
  141 + typeName: undefined,
  142 +});
  143 +
  144 +/** 添加车辆性质 */
  145 +function handleAdd() {
  146 + reset();
  147 + open.value = true;
  148 + title.value = "添加车辆性质";
  149 +}
  150 +/** 修改角色 */
  151 +function handleUpdate(row) {
  152 + reset();
  153 + form.value = row;
  154 + title.value = "修改车辆性质";
  155 + open.value = true;
  156 +}
  157 +
  158 +/** 删除按钮操作 */
  159 +function handleDelete(row) {
  160 + const natureIds = row.natureId || ids.value;
  161 + proxy.$modal
  162 + .confirm('是否确认删除车辆性质编号为"' + natureIds + '"的数据项?')
  163 + .then(function () {
  164 + // return delRole(natureIds);
  165 + proxy.$modal.msgSuccess("删除成功");
  166 + });
  167 +}
  168 +
  169 +/** 重置新增的表单以及其他数据 */
  170 +function reset() {
  171 + form.value = {
  172 + natureId: undefined,
  173 + typeName: undefined,
  174 + authTime: undefined,
  175 + editAuth: undefined,
  176 + };
  177 + proxy.resetForm("natureRef");
  178 +}
  179 +
  180 +/** 多选框选中数据 */
  181 +function handleSelectionChange(selection) {
  182 + ids.value = selection.map((item) => item.roleId);
  183 + multiple.value = !selection.length;
  184 +}
  185 +
  186 +/** 搜索按钮操作 */
  187 +function handleQuery() {}
  188 +
  189 +/** 重置按钮操作 */
  190 +function resetQuery() {
  191 + proxy.resetForm("queryRef");
  192 +}
  193 +
  194 +/** 提交按钮 */
  195 +function submitForm() {
  196 + proxy.$refs["natureRef"].validate((valid) => {
  197 + if (valid) {
  198 + if (form.value.natureId != undefined) {
  199 + proxy.$modal.msgSuccess("修改成功");
  200 + } else {
  201 + proxy.$modal.msgSuccess("新增成功");
  202 + }
  203 + }
  204 + });
  205 +}
  206 +/** 取消按钮 */
  207 +function cancel() {
  208 + open.value = false;
  209 + reset();
  210 +}
7 </script> 211 </script>
8 212
9 <style></style> 213 <style></style>
@@ -16,19 +16,11 @@ @@ -16,19 +16,11 @@
16 type="danger" 16 type="danger"
17 plain 17 plain
18 icon="Delete" 18 icon="Delete"
  19 + :disabled="multiple"
19 v-hasPermi="['system:role:remove']" 20 v-hasPermi="['system:role:remove']"
20 >删除</el-button 21 >删除</el-button
21 > 22 >
22 </el-col> 23 </el-col>
23 - <el-col :span="1.5">  
24 - <el-button  
25 - type="warning"  
26 - plain  
27 - icon="Download"  
28 - v-hasPermi="['system:role:export']"  
29 - >导出</el-button  
30 - >  
31 - </el-col>  
32 </el-row> 24 </el-row>
33 25
34 <!-- 表格数据 --> 26 <!-- 表格数据 -->
@@ -52,8 +44,9 @@ @@ -52,8 +44,9 @@
52 width="180" 44 width="180"
53 prop="Feedback" 45 prop="Feedback"
54 > 46 >
55 - <template #default>  
56 - <el-button type="danger">删除</el-button> 47 + <template #default="{ row }">
  48 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  49 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
57 </template> 50 </template>
58 </el-table-column> 51 </el-table-column>
59 </el-table> 52 </el-table>
@@ -68,7 +61,7 @@ @@ -68,7 +61,7 @@
68 61
69 <!-- 添加或修改用户配置对话框 --> 62 <!-- 添加或修改用户配置对话框 -->
70 <el-dialog :title="title" v-model="open" width="600px" append-to-body> 63 <el-dialog :title="title" v-model="open" width="600px" append-to-body>
71 - <el-form :model="form" :rules="rules" ref="rulesRef" label-width="80px"> 64 + <el-form :model="form" :rules="rules" ref="companyRef" label-width="80px">
72 <el-form-item label="公司名称" prop="company"> 65 <el-form-item label="公司名称" prop="company">
73 <el-input 66 <el-input
74 v-model="form.company" 67 v-model="form.company"
@@ -90,15 +83,17 @@ @@ -90,15 +83,17 @@
90 <script setup> 83 <script setup>
91 const { proxy } = getCurrentInstance(); 84 const { proxy } = getCurrentInstance();
92 const loading = ref(false); 85 const loading = ref(false);
  86 +const multiple = ref(true);
93 const total = ref(3); 87 const total = ref(3);
94 -const title = ref("添加分配规则"); 88 +const ids = ref([]);
  89 +const title = ref("");
95 const open = ref(false); 90 const open = ref(false);
96 const queryParams = reactive({ 91 const queryParams = reactive({
97 pageNum: 1, 92 pageNum: 1,
98 pageSize: 10, 93 pageSize: 10,
99 }); 94 });
100 95
101 -const form = reactive({}); 96 +const form = ref({});
102 const rules = { 97 const rules = {
103 company: [ 98 company: [
104 { required: true, message: "公司名称不能为空", trigger: "blur" }, 99 { required: true, message: "公司名称不能为空", trigger: "blur" },
@@ -120,7 +115,14 @@ const rulesList = ref([ @@ -120,7 +115,14 @@ const rulesList = ref([
120 function handleAdd() { 115 function handleAdd() {
121 reset(); 116 reset();
122 open.value = true; 117 open.value = true;
123 - title.value = "添加规则"; 118 + title.value = "添加承保公司";
  119 +}
  120 +/** 修改角色 */
  121 +function handleUpdate(row) {
  122 + reset();
  123 + form.value = row;
  124 + title.value = "修改承保公司";
  125 + open.value = true;
124 } 126 }
125 127
126 /** 重置操作表单 */ 128 /** 重置操作表单 */
@@ -129,14 +131,23 @@ function reset() { @@ -129,14 +131,23 @@ function reset() {
129 companyId: undefined, 131 companyId: undefined,
130 company: undefined, 132 company: undefined,
131 }; 133 };
132 - proxy.resetForm("rulesRef"); 134 + proxy.resetForm("companyRef");
  135 +}
  136 +/** 删除按钮操作 */
  137 +function handleDelete(row) {
  138 + const companyIds = row.companyId || ids.value;
  139 + proxy.$modal
  140 + .confirm('是否确认删除车辆性质编号为"' + companyIds + '"的数据项?')
  141 + .then(function () {
  142 + // return delRole(natureIds);
  143 + proxy.$modal.msgSuccess("删除成功");
  144 + });
133 } 145 }
134 146
135 /** 多选框选中数据 */ 147 /** 多选框选中数据 */
136 function handleSelectionChange(selection) { 148 function handleSelectionChange(selection) {
137 - // ids.value = selection.map(item => item.roleId);  
138 - // single.value = selection.length != 1;  
139 - // multiple.value = !selection.length; 149 + ids.value = selection.map((item) => item.roleId);
  150 + multiple.value = !selection.length;
140 console.log(selection); 151 console.log(selection);
141 } 152 }
142 153
@@ -144,7 +155,7 @@ const getList = () => {}; @@ -144,7 +155,7 @@ const getList = () => {};
144 155
145 /** 提交按钮 */ 156 /** 提交按钮 */
146 function submitForm() { 157 function submitForm() {
147 - proxy.$refs["rulesRef"].validate((valid) => { 158 + proxy.$refs["companyRef"].validate((valid) => {
148 if (valid) { 159 if (valid) {
149 if (form.value.userId != undefined) { 160 if (form.value.userId != undefined) {
150 proxy.$modal.msgSuccess("修改成功"); 161 proxy.$modal.msgSuccess("修改成功");
  1 +<template>
  2 + <div class="app-container">
  3 + <el-row :gutter="10" class="mb8">
  4 + <el-col :span="1.5">
  5 + <el-button
  6 + type="primary"
  7 + plain
  8 + icon="Plus"
  9 + v-hasPermi="['system:role:add']"
  10 + @click="handleAdd"
  11 + >新增</el-button
  12 + >
  13 + </el-col>
  14 + <el-col :span="1.5">
  15 + <el-button
  16 + type="danger"
  17 + plain
  18 + icon="Delete"
  19 + :disabled="multiple"
  20 + v-hasPermi="['system:role:remove']"
  21 + @click="handleDelete"
  22 + >删除</el-button
  23 + >
  24 + </el-col>
  25 + <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
  26 + </el-row>
  27 +
  28 + <!-- 表格数据 -->
  29 + <el-table
  30 + v-loading="loading"
  31 + :data="dataList"
  32 + @selection-change="handleSelectionChange"
  33 + >
  34 + <el-table-column type="selection" width="55" align="center" />
  35 + <el-table-column
  36 + label="序号"
  37 + prop="policyId"
  38 + width="120"
  39 + align="center"
  40 + />
  41 + <el-table-column label="保险名称" prop="insuranceName" align="center" />
  42 + <el-table-column label="操作时间" prop="authTime" align="center" />
  43 + <el-table-column label="操作人" prop="editAuth" align="center" />
  44 + <el-table-column
  45 + label="操作"
  46 + fixed="right"
  47 + align="center"
  48 + prop="Feedback"
  49 + >
  50 + <template #default="{ row }">
  51 + <el-button type="primary" @click="handleUpdate(row)">编辑</el-button>
  52 + <el-button type="danger" @click="handleDelete(row)">删除</el-button>
  53 + </template>
  54 + </el-table-column>
  55 + </el-table>
  56 +
  57 + <pagination
  58 + v-show="total > 0"
  59 + :total="total"
  60 + v-model:page="queryParams.pageNum"
  61 + v-model:limit="queryParams.pageSize"
  62 + />
  63 +
  64 + <!-- 添加或修改车辆性质配置对话框 -->
  65 + <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  66 + <el-form ref="natureRef" :model="form" :rules="rules" label-width="120px">
  67 + <el-form-item label="保险名称" prop="insuranceName">
  68 + <el-input v-model="form.insuranceName" placeholder="请输入保险名称" />
  69 + </el-form-item>
  70 + </el-form>
  71 + <template #footer>
  72 + <div class="dialog-footer">
  73 + <el-button type="primary" @click="submitForm">确 定</el-button>
  74 + <el-button @click="cancel">取 消</el-button>
  75 + </div>
  76 + </template>
  77 + </el-dialog>
  78 + </div>
  79 +</template>
  80 +
  81 +<script setup>
  82 +const { proxy } = getCurrentInstance();
  83 +const dataList = ref([
  84 + {
  85 + policyId: "1",
  86 + insuranceName: "商业险",
  87 + authTime: "2024-09-24 11:53:43",
  88 + editAuth: "admin",
  89 + },
  90 + {
  91 + policyId: "2",
  92 + insuranceName: "人身安全险",
  93 + authTime: "2024-09-24 11:53:43",
  94 + editAuth: "admin",
  95 + },
  96 + {
  97 + policyId: "3",
  98 + insuranceName: "交强险",
  99 + authTime: "2024-09-24 11:53:43",
  100 + editAuth: "admin",
  101 + },
  102 +]);
  103 +const open = ref(false);
  104 +const multiple = ref(true);
  105 +const loading = ref(false);
  106 +const total = ref(5);
  107 +const title = ref("");
  108 +const ids = ref([]);
  109 +const form = ref({});
  110 +const rules = ref({
  111 + insuranceName: [
  112 + { required: true, message: "角色名称不能为空", trigger: "blur" },
  113 + ],
  114 +});
  115 +const queryParams = reactive({
  116 + pageNum: 1,
  117 + pageSize: 10,
  118 +});
  119 +
  120 +/** 添加车辆性质 */
  121 +function handleAdd() {
  122 + reset();
  123 + open.value = true;
  124 + title.value = "添加号牌种类";
  125 +}
  126 +/** 修改角色 */
  127 +function handleUpdate(row) {
  128 + reset();
  129 + form.value = row;
  130 + title.value = "修改号牌种类";
  131 + open.value = true;
  132 +}
  133 +
  134 +/** 删除按钮操作 */
  135 +function handleDelete(row) {
  136 + const natureIds = row.natureId || ids.value;
  137 + proxy.$modal
  138 + .confirm('是否确认删除车辆性质编号为"' + natureIds + '"的数据项?')
  139 + .then(function () {
  140 + // return delRole(natureIds);
  141 + proxy.$modal.msgSuccess("删除成功");
  142 + });
  143 +}
  144 +
  145 +/** 重置新增的表单以及其他数据 */
  146 +function reset() {
  147 + form.value = {
  148 + natureId: undefined,
  149 + numSort: undefined,
  150 + authTime: undefined,
  151 + editAuth: undefined,
  152 + };
  153 + proxy.resetForm("natureRef");
  154 +}
  155 +
  156 +/** 多选框选中数据 */
  157 +function handleSelectionChange(selection) {
  158 + ids.value = selection.map((item) => item.roleId);
  159 + multiple.value = !selection.length;
  160 +}
  161 +
  162 +/** 提交按钮 */
  163 +function submitForm() {
  164 + proxy.$refs["natureRef"].validate((valid) => {
  165 + if (valid) {
  166 + if (form.value.natureId != undefined) {
  167 + proxy.$modal.msgSuccess("修改成功");
  168 + } else {
  169 + proxy.$modal.msgSuccess("新增成功");
  170 + }
  171 + }
  172 + });
  173 +}
  174 +/** 取消按钮 */
  175 +function cancel() {
  176 + open.value = false;
  177 + reset();
  178 +}
  179 +</script>
  180 +
  181 +<style></style>
@@ -183,14 +183,7 @@ @@ -183,14 +183,7 @@
183 </el-col> 183 </el-col>
184 </el-row> 184 </el-row>
185 <el-form-item label="作废原因" prop="progress"> 185 <el-form-item label="作废原因" prop="progress">
186 - <el-input  
187 - :rows="6"  
188 - disabled  
189 - type="textarea"  
190 - placeholder="请输入作废原因"  
191 - v-model="form.deprecatedReason"  
192 - resize="none"  
193 - /> 186 + <QuillEditor :value="form.deprecatedReason" @updateValue="getMsg" />
194 </el-form-item> 187 </el-form-item>
195 </el-form> 188 </el-form>
196 <template #footer> 189 <template #footer>
@@ -329,6 +322,9 @@ function resetQuery() { @@ -329,6 +322,9 @@ function resetQuery() {
329 proxy.resetForm("queryRef"); 322 proxy.resetForm("queryRef");
330 handleQuery(); 323 handleQuery();
331 } 324 }
  325 +const getMsg = (val) => {
  326 + console.log(val);
  327 +};
332 </script> 328 </script>
333 329
334 <style></style> 330 <style></style>