Commit df3c5792 authored by 盖献康's avatar 盖献康

Merge remote-tracking branch 'origin/master'

parents 5d18d861 143641c8
......@@ -58,3 +58,11 @@ export function refreshCache() {
method: 'delete'
})
}
export function uploadCommon(data) {
return request({
headers: { 'Content-Type': 'multipart/form-data' },
url: '/common/upload',
method: 'post',
data
})
}
......@@ -273,3 +273,44 @@
.permi-disabled {
cursor: not-allowed;
}
.el-button--success--solid{
width: 50px !important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(95,181,75)!important;
}
.el-button--primary--solid{
width: 50px !important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(52, 144, 206)!important;
}
.el-button--warning--solid{
width: 50px!important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(255,157,78)!important;
}
.el-button--error--solid{
width: 50px!important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(219, 71, 71)!important;
}
.el-button--success--solid--four{
width: 80px !important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(95,181,75)!important;
}
.el-button--primary--solid--four{
width: 80px !important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(52, 144, 206)!important;
}
.el-button--warning--solid--four{
width: 80px!important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(255,157,78)!important;
}
.el-button--error--solid--four{
width: 80px!important;
border-radius: 6px 6px 6px 6px;
border: 1px solid rgb(219, 71, 71)!important;
}
<template>
<div class="component-upload-image">
<ImageCropperModal
:visible="cropperVisible"
:url="file"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
@cancel="cropperVisible = false"
@confirm="onConfirm"
/>
<el-upload
ref="imageUpload"
:action="uploadImgUrl"
multiple
action
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:limit="1"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-remove="handleDelete"
:show-file-list="true"
:headers="headers"
:file-list="fileList"
:auto-upload="false"
:on-change="changeUpload"
:on-preview="handlePictureCardPreview"
:class="{hide: fileList.length >= limit
|| $refs.imageUpload && $refs.imageUpload.uploadFiles.length >= limit
|| number >= limit}"
>
<i class="el-icon-plus" />
<i slot="default" class="el-icon-plus" />
<div slot="file" class="customer-upload-area">
<el-image :ref="file.url" class="el-upload-list__item-thumbnail customer-upload-error" :src="file.url" :preview-src-list="[file.url]">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
<div>加载失败</div>
</div>
</el-image>
<label class="el-upload-list__item-status-label">
<i class="el-icon-upload-success el-icon-check" />
</label>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in" />
</span>
<span
class="el-upload-list__item-delete"
@click="handleDelete(file)"
>
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload>
<!-- 上传提示 -->
......@@ -45,9 +81,15 @@
</template>
<script>
import ImageCropperModal from '@/components/imageCropper/index'
import { getToken } from '@/utils/auth'
import { uploadCommon } from '@/api/system/config'
export default {
components: {
ImageCropperModal
},
props: {
value: [String, Object, Array],
// 图片数量限制
......@@ -58,7 +100,7 @@ export default {
// 大小限制(MB)
fileSize: {
type: Number,
default: 4
default: 5
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
......@@ -73,6 +115,14 @@ export default {
},
data() {
return {
queryParams: {
companyImgUrl: ''
},
autoCropWidth: '400', // 要裁剪的宽
autoCropHeight: '400', // 要裁剪的高
file: '',
fileName: '', // 存放文件名
cropperVisible: false, // 控制弹窗打开关闭
number: 0,
uploadList: [],
dialogImageUrl: '',
......@@ -96,15 +146,16 @@ export default {
value: {
handler(val) {
if (val) {
console.log('kkkkkkkkkkkkkkkkkk', this.baseUrl)
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(',')
// 然后将数组转为对象数组
this.fileList = list.map(item => {
if (typeof item === 'string') {
if (item.indexOf(this.baseUrl) === -1) {
item = { name: this.baseUrl + item, url: encodeURI(this.baseUrl + item) }
item = { name: this.baseUrl + item, url: this.baseUrl + item }
} else {
item = { name: item, url: encodeURI(item) }
item = { name: item, url: item }
}
}
return item
......@@ -119,8 +170,73 @@ export default {
}
},
methods: {
// 文件状态改变时
changeUpload(file) {
var img = file.name.substring(file.name.lastIndexOf('.') + 1)
const suffix = img === 'jpg' || img === 'png' || img === 'jpeg'
if (!suffix) {
this.$message.error('只能上传图片!')
return false
}
// URL.createObjectURL的参数只能是blob或者file类型
// 第一种方法用FileReader,URL.createObjectURL接收blob类型
const reader = new FileReader()
reader.onload = () => {
// 把Array Buffer转化为blob 如果是base64不需要
this.file = typeof reader.result === 'object' ? window.URL.createObjectURL(new Blob([reader.result]))
: reader.result
}
// 转化为base64
this.cropperVisible = true
reader.readAsArrayBuffer(file.raw)
// 第二种方法,URL.createObjectURL接收file类型
// this.$nextTick(() => {
// this.file = URL.createObjectURL(file.raw)
// this.cropperVisible = true
// })
this.fileName = file.name
},
// 点击剪裁弹框的确定按钮
async onConfirm(blob) {
// 这里的new FormData()指,以文件的方式传给后端(FormData的数据)
const form = new FormData()
// new File()的第一个参数是一个字符串数组,数组中的每一个元素对应着文件中一行的内容
// 第二个参数就是文件名字符串
// 第三个参数可以设定一些文件的属性,比如文件的MIME,最后更新时间等
const file = new File([blob], this.fileName, { type: blob.type, lastModified: Date.now() })
file.uid = Date.now()
form.append('file', file)
// 如果想在这里打印查看form的值,会发现它是空对象
// 解决办法,需要用form.get('键')的方法获取值
// console.log(form.get('file'))
// 这里调用接口,获取后端返给的图片地址
this.number++
uploadCommon(form).then(res => {
this.cropperVisible = false
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName })
this.uploadedSuccessfully()
} else {
this.number--
// this.$modal.closeLoading()
this.$modal.msgError(res.msg)
this.$refs.imageUpload.handleRemove(file)
this.uploadedSuccessfully()
}
}).catch(err => {
this.handleUploadError(err)
})
},
// 上传前loading加载
handleBeforeUpload(file) {
console.log('图片file---,', file.name)
const nameTest = /^[^%;]*$/
if (!nameTest.test(file.name)) {
this.$modal.msgError('不能含有%;等特殊字符')
return false
}
let isImg = false
if (this.fileType.length) {
let fileExtension = ''
......@@ -137,13 +253,13 @@ export default {
}
if (!isImg) {
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件`)
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`)
return false
}
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize
if (!isLt) {
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB`)
this.$modal.msgError(`上传图片大小不能超过 ${this.fileSize} MB!`)
return false
}
}
......@@ -152,7 +268,7 @@ export default {
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个`)
this.$modal.msgError(`上传文件数量不能超过 ${this.limit}!`)
},
// 上传成功回调
handleUploadSuccess(res, file) {
......@@ -161,7 +277,7 @@ export default {
this.uploadedSuccessfully()
} else {
this.number--
this.$modal.closeLoading()
// this.$modal.closeLoading()
this.$modal.msgError(res.msg)
this.$refs.imageUpload.handleRemove(file)
this.uploadedSuccessfully()
......@@ -178,22 +294,22 @@ export default {
// 上传失败
handleUploadError() {
this.$modal.msgError('上传图片失败,请重试')
this.$modal.closeLoading()
// this.$modal.closeLoading()
},
// 上传结束处理
uploadedSuccessfully() {
console.log('uploadedSuccessfully', this.number, this.uploadList.length)
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList)
this.uploadList = []
this.number = 0
this.$emit('input', this.listToString(this.fileList))
this.$modal.closeLoading()
// this.$modal.closeLoading()
}
},
// 预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
this.$refs[file.url].clickHandler()
},
// 对象转成指定字符串分隔
listToString(list, separator) {
......@@ -210,29 +326,44 @@ export default {
}
</script>
<style scoped lang="scss">
.customer-upload-area{
width: 100%;
height: 100%;
.customer-upload-error{
width: 100%;
height: 100%;
color: #DB4747;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
font-size: 12px;
.el-icon-picture-outline{
font-size: 18px;
}
}
}
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
display: none;
}
::v-deep .el-upload-list--picture-card {
line-height: 0;
}
::v-deep .el-upload-list__item {
margin: 0 0.5rem 0 0 !important;
display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
transition: all 0s;
transition: all 0s;
}
::v-deep .el-list-enter, .el-list-leave-active {
opacity: 0;
transform: translateY(0);
opacity: 0;
transform: translateY(0);
}
::v-deep .el-upload:focus {
border-color: #5FB54B !important;
color: #5FB54B !important;
::v-deep .el-upload-list--picture-card {
line-height: 0;
}
::v-deep .el-upload-list__item {
margin: 0 0.5rem 0 0 !important;
}
</style>
<template>
<div class="image-cropper-modal">
<el-dialog
:visible="visible"
:append-to-body="true"
:close-on-click-modal="false"
title="裁剪图片"
width="700px"
class="image-cropper-dialog"
@close="visible = false"
>
<vue-cropper
ref="imageCropper"
:img="url"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
:auto-crop="true"
:fixed="false"
:fixed-number="[1, 1]"
:fixed-box="true"
:output-size="1"
output-type="png"
/>
<template #footer>
<span class="dialog-footer">
<el-button class="common-btn cancel" @click="onCancel">取 消</el-button>
<el-button class="common-btn confirm" type="primary" @click="onConfirm">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
name: 'ImageCropperModal',
components: {
VueCropper
},
props: {
visible: {
type: Boolean,
default: false
},
url: {
type: String,
default: ''
},
autoCropWidth: {
type: String,
default: `${100 * 4}`
},
autoCropHeight: {
type: String,
default: `${100 * 4}`
}
},
methods: {
onCancel() {
this.$emit('cancel')
},
onConfirm() {
this.$refs.imageCropper.getCropBlob((blob) => {
this.$emit('confirm', blob)
})
}
}
}
</script>
<style lang="scss" scoped>
.image-cropper-dialog {
.vue-cropper {
height: 500px;
}
}
</style>
......@@ -106,7 +106,7 @@ service.interceptors.response.use(res => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
message = "网络异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
......
<template>
<div style="background-color: #FFFFFF;">
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane name="article" label="文章管理">
<!--顶部搜索区-->
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
<el-form-item prop="articleTitle">
<el-input
v-model.trim="queryParams.articleTitle"
clearable
placeholder="请输入文章标题关键字"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item style="margin-left: 10px;" prop="articleStatus">
<el-select v-model.trim="queryParams.articleStatus" clearable placeholder="状态">
<el-option
v-for="item in articleStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!--顶部搜索区-->
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
<el-form-item prop="articleTitle">
<el-input
v-model.trim="queryParams.articleTitle"
clearable
placeholder="请输入文章标题关键字"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item style="margin-left: 10px;" prop="articleStatus">
<el-select v-model.trim="queryParams.articleStatus" clearable placeholder="状态">
<el-option
v-for="item in articleStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item style="margin-left: 10px;" prop="articleCreateTime">
<el-date-picker
v-model.trim="queryParams.articleCreateTime"
clearable
placeholder="请选择创建日期"
type="date"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item style="margin-left: 10px;" prop="sort">
<el-select
v-model.trim="queryParams.params.sort"
clearable
placeholder="请选择排序方式"
>
<el-option
v-for="item in sortList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div>
<!--顶部操作按钮-->
<el-form-item>
<!--新增文章-->
<el-button
v-hasPermi="['business:article:add']"
class="fourWordsBtn"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增文章
</el-button>
<!--选择全部-->
<el-form-item style="margin-left: 10px;" prop="articleCreateTime">
<el-date-picker
v-model.trim="queryParams.articleCreateTime"
clearable
placeholder="请选择创建日期"
type="date"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item style="margin-left: 10px;" prop="sort">
<el-select
v-model.trim="queryParams.params.sort"
clearable
placeholder="请选择排序方式"
>
<el-option
v-for="item in sortList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div>
<!--顶部操作按钮-->
<el-form-item>
<!--新增文章-->
<el-button
v-hasPermi="['business:article:add']"
class="fourWordsBtn"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增文章
</el-button>
<!--选择全部-->
<el-button
v-hasPermi="['system:manage:export']"
class="fourWordsBtn"
size="mini"
@click="selectAll"
>
<svg-icon icon-class="shaixuan_icon_quanbu" />
选择全部
</el-button>
<!--反向选择-->
<el-button
v-hasPermi="['system:manage:export']"
class="fourWordsBtn"
icon="el-icon-back"
size="mini"
@click="reverseSelect"
>反向选择
</el-button>
<!--批量导入-->
<el-button
v-hasPermi="['system:pets:export']"
class="fourWordsBtn"
size="mini"
@click="handleExport"
>
<!-- 导入svg文件-->
<svg-icon icon-class="shaixuan_icon_daoru" />
批量导入
</el-button>
<!--批量导出-->
<el-button
v-hasPermi="['system:pets:export']"
class="fourWordsBtn"
size="mini"
:loading="exportLoading"
@click="handleExport"
>
<!-- 导入svg文件-->
<svg-icon icon-class="shaixuan_icon_daochu" />
批量导出
</el-button>
</el-form-item>
<el-form-item style="position: absolute;right: 0.6%;">
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
</el-form>
<!--列表-->
<el-table
ref="table"
v-loading="loading"
:data="articleList"
:header-cell-style="{background:'#F4F4F4'}"
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" reserve-selection type="selection" width="55" />
<el-table-column label="序号" min-width="80" show-overflow-tooltip type="index" />
<el-table-column label="文章标题" prop="articleTitle" show-overflow-tooltip width="200" />
<el-table-column
:show-overflow-tooltip="true"
label="文章内容"
prop="articleContent"
width="200"
/>
<el-table-column label="权重" min-width="55" prop="articleWeight" show-overflow-tooltip />
<el-table-column
label="创建日期"
min-width="80"
prop="articleCreateTime"
show-overflow-tooltip
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.articleCreateTime, '{y}/{m}/{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="状态" min-width="60" prop="articleStatus" show-overflow-tooltip>
<template slot-scope="scope">
<span :style="showStatus(scope.row.articleStatus) === '• 已上架' ? 'color: #67C23A' : 'color: #F56C6C'">{{
showStatus(scope.row.articleStatus) || '-'
}}</span>
</template>
</el-table-column>
<el-table-column class-name="small-padding fixed-width" label="操作" min-width="100">
<template slot-scope="scope">
<div style="display: flex;">
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['system:manage:export']"
class="fourWordsBtn"
icon="el-icon-document"
plain
size="mini"
@click="selectAll"
>
<svg-icon icon-class="shaixuan_icon_quanbu" />
选择全部
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
<!--反向选择-->
</div>
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['system:manage:export']"
class="fourWordsBtn"
icon="el-icon-back"
v-hasPermi="['business:article:edit']"
icon="el-icon-edit"
plain
size="mini"
@click="reverseSelect"
>反向选择
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
type="primary"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
<!--批量导入-->
</div>
<div v-if="scope.row.articleStatus==='1'">
<el-button
v-hasPermi="['system:pets:export']"
class="fourWordsBtn"
key="1"
v-hasPermi="['business:article:remove']"
icon="el-icon-delete"
plain
size="mini"
@click="handleExport"
>
<!-- 导入svg文件-->
<svg-icon icon-class="shaixuan_icon_daoru" />
批量导入
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
type="danger"
@click="handleDelete(scope.row)"
>删除
</el-button>
<!--批量导出-->
</div>
<div v-else-if="scope.row.articleStatus==='0'">
<el-button
v-hasPermi="['system:pets:export']"
class="fourWordsBtn"
key="2"
icon="el-icon-video-pause"
plain
size="mini"
:loading="exportLoading"
@click="handleExport"
>
<!-- 导入svg文件-->
<svg-icon icon-class="shaixuan_icon_daochu" />
批量导出
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,157,78);"
type="warning"
@click="handleChange(scope.row)"
>下架
</el-button>
</el-form-item>
<el-form-item style="position: absolute;right: 0.6%;">
<!--搜索 重置-->
<el-button class="queryBtn" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button class="resetBtn" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
</div>
</el-form>
<!--列表-->
<el-table
ref="table"
v-loading="loading"
:data="articleList"
:header-cell-style="{background:'#F4F4F4'}"
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" reserve-selection type="selection" width="55" />
<el-table-column label="序号" min-width="80" show-overflow-tooltip type="index" />
<el-table-column label="文章标题" prop="articleTitle" show-overflow-tooltip width="200" />
<el-table-column
:show-overflow-tooltip="true"
label="文章内容"
prop="articleContent"
width="200"
/>
<el-table-column label="权重" min-width="55" prop="articleWeight" show-overflow-tooltip />
<el-table-column
label="创建日期"
min-width="80"
prop="articleCreateTime"
show-overflow-tooltip
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.articleCreateTime, '{y}/{m}/{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="状态" min-width="60" prop="articleStatus" show-overflow-tooltip>
<template slot-scope="scope">
<span :style="showStatus(scope.row.articleStatus) === '• 已上架' ? 'color: #67C23A' : 'color: #F56C6C'">{{
showStatus(scope.row.articleStatus) || '-'
}}</span>
</template>
</el-table-column>
<el-table-column class-name="small-padding fixed-width" label="操作" min-width="100">
<template slot-scope="scope">
<div style="display: flex;">
<div style="padding-right: 20px;">
<el-button
icon="el-icon-document"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
type="success"
@click="handleDetail(scope.row)"
>详情
</el-button>
</div>
<div style="padding-right: 20px;">
<el-button
v-hasPermi="['business:article:edit']"
icon="el-icon-edit"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
type="primary"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
</div>
<div v-if="scope.row.articleStatus==='1'">
<el-button
key="1"
v-hasPermi="['business:article:remove']"
icon="el-icon-delete"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
type="danger"
@click="handleDelete(scope.row)"
>删除
</el-button>
</div>
<div v-else-if="scope.row.articleStatus==='0'">
<el-button
key="2"
icon="el-icon-video-pause"
plain
size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,157,78);"
type="warning"
@click="handleChange(scope.row)"
>下架
</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
<!--分页-->
<pagination
v-show="total>0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
/>
</el-tab-pane>
</el-tabs>
<!--分页-->
<pagination
v-show="total>0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
/>
<!-- 添加或修改文章对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body width="60%">
......@@ -568,7 +564,7 @@ export default {
</script>
<style lang="scss" scoped>
.app-container {
padding: 0 1.5rem;
padding: 1.5rem;
margin-bottom: 0.5em;
}
......
......@@ -274,14 +274,6 @@
style="width: 250px"
@change="handleChangeServiceArea"
/>
<!-- <el-select v-model="form.serviceArea" placeholder="请选择支持服务地区" style="width: 300px" multiple collapse-tags clearable>-->
<!-- <el-option-->
<!-- v-for="dict in dict.type.service_area"-->
<!-- :key="dict.label"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
</el-form-item>
</el-col>
</el-row>
......@@ -289,12 +281,12 @@
<el-row>
<el-col>
<el-form-item label="支持检查项目" prop="checkType">
<el-select v-model="form.checkType" placeholder="请选择支持检查项目" style="width: 300px" multiple collapse-tags clearable>
<el-select v-model="form.checkType" placeholder="请选择支持检查项目" style="width: 250px" multiple collapse-tags clearable>
<el-option
v-for=" dict in checkItemOptions"
:key="dict.id"
:label="dict.name"
:value="dict.id"
v-for=" (item,index) in checkItemOptions"
:key="index"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
......@@ -464,6 +456,8 @@ export default {
// 是否显示
isShow: '',
hpshow: '',
// 查询检查项目下拉框传递的字段
itemType: '',
// // 可用时段
// useTime: {
......@@ -518,7 +512,6 @@ export default {
},
created() {
this.getUserInfo()
this.getItemByType()
this.getAreaData()
},
methods: {
......@@ -530,12 +523,15 @@ export default {
this.isShow = false
this.hpshow = true
this.isPrivate = 1
this.itemType = 0
}
if (this.userType === '00') {
this.isShow = true
this.hpshow = false
this.isPrivate = 0
this.itemType = 3
}
this.getItemByType()
console.log('登陆人', res)
console.log('this.form--------------------', this.form)
})
......@@ -603,13 +599,6 @@ export default {
console.log('城市名', city)
})
},
// 时间段获取
getam() {
console.log(this.useTime)
},
getpm() {
console.log(this.useTime)
},
// 单位时段服务数不可以输入小数
handleuseNum() {
const parsedValue = parseFloat(this.form.useNum)
......@@ -695,14 +684,7 @@ export default {
},
// 四个时间的表单校验
validateMorningStart(rule, value, callback) {
// // TODO: please clear this log
const morningEnd = this.form.useTime.ame
console.log('value', value)
console.log('morningEnd', morningEnd)
console.log('this.form.useTime.ame', this.form.useTime.ame)
console.log('this.form.useTime.pms', this.form.useTime.pms)
console.log('his.form.useTime.pme', this.form.useTime.pme)
// if (isEmpty(value) && isEmpty(this.form.useTime.ams) || isEmpty(this.form.useTime.ame))
if (isEmpty(value) && isEmpty(this.form.useTime.ame) && isEmpty(this.form.useTime.pms) && isEmpty(this.form.useTime.pme)) {
console.log('上午开始时间第一层报错')
callback(new Error('请选择上午开始时间'))
......@@ -759,7 +741,7 @@ export default {
},
// 获取检查项目下拉框
getItemByType() {
listItemByType({ itemType: null }).then(res => {
listItemByType({ itemType: this.itemType }).then(res => {
console.log('检查项目', res)
this.checkItemOptions = res.rows
console.log('xdddd', this.checkItemOptions)
......@@ -865,5 +847,9 @@ export default {
::v-deep .el-picker-panel {
background-color: #5FB54B;
}
::v-deep.time-select-item.selected:not {
background: #f6fcf5;
}
</style>
......@@ -589,12 +589,12 @@
<el-row>
<el-col>
<el-form-item label="支持检查项目" prop="checkType">
<el-select v-model="form.checkType" multiple placeholder="请选择支持检查项目" style="width: 300px" collapse-tags clearable>
<el-select v-model="form.checkType" placeholder="请选择支持检查项目" style="width: 250px" multiple collapse-tags clearable>
<el-option
v-for="(item,index) in dict.type.exam_type"
:key="index.label"
:label="item.label"
:value="item.value"
v-for="(item, index) in checkItemOptions"
:key="index"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
......@@ -621,6 +621,7 @@ import { getInfo } from '@/api/login'
import { listCheckManage } from '@/api/business/manage'
import { isEmpty, parseTime, selectDictLabels } from '@/utils/ruoyi'
import { deepClone } from '@/utils'
import { listItemByType } from '@/api/business/item'
export default {
name: 'EquipmentDetail',
dicts: ['device_status', 'device_type', 'exam_type', 'check_type', 'service_area'],
......@@ -671,6 +672,7 @@ export default {
addtions: {
names: ''
},
addressList: [],
addForm: {
province: '',
county: '',
......@@ -798,6 +800,8 @@ export default {
citys: regionData,
// 支持服务地区
serviceAreaS: [],
// 检查项目下拉框
checkItemOptions: [],
serviceAreaList: [
{
......@@ -844,11 +848,14 @@ export default {
if (this.userType === '3') {
this.isShow = false
this.hpshow = true
this.itemType = 0
}
if (this.userType === '00') {
this.isShow = true
this.hpshow = false
this.itemType = 3
}
this.getItemByType()
console.log('登陆人', res)
})
},
......@@ -981,6 +988,14 @@ export default {
}
}
},
// 获取检查项目下拉框
getItemByType() {
listItemByType({ itemType: this.itemType }).then(res => {
console.log('检查项目', res)
this.checkItemOptions = res.rows
console.log('xdddd', this.checkItemOptions)
})
},
// 获取地址数据
getAreaData() {
getAreTreeStructure().then(response => {
......@@ -988,7 +1003,48 @@ export default {
if (response.code === 200) {
this.removeEmptyChildren(response.data)
this.areaOptions = response.data
console.log('dsa', response.data)
console.log(' this.form.serviceArea', this.form.serviceArea)
const valueGroups = this.form.serviceArea
const labelList = []
for (let i = 0; i < valueGroups.length; i++) {
const values = valueGroups[i].split(',')
let currentData = this.areaOptions
const currentLabel = []
let foundLabel = true
for (let j = 0; j < values.length; j++) {
const value = parseInt(values[j])
const item = currentData.find((item) => item.value === value)
if (item) {
if (currentLabel.length === 0) {
currentLabel.push(item.label)
} else {
currentLabel.push(`-${item.label}`)
}
currentData = item.children
} else {
foundLabel = false
break
}
}
if (foundLabel) {
labelList.push(currentLabel.join(''))
} else {
labelList.push('暂无数据')
}
}
this.form.serviceAreaText = labelList
console.log(labelList)
console.log('----------------------------------------111111111111', labelList)
console.log(' this.areaOptions', this.areaOptions)
}
})
},
......@@ -1054,7 +1110,7 @@ export default {
form.addressText = this.addtions.names
}
if (!isEmpty(form.checkType)) {
form.checkType = form.checkType.toString()
form.checkType = form.checkType.join(',')
}
if (!isEmpty(form.serviceArea)) {
console.log('支持服务地区', form.serviceArea)
......@@ -1102,42 +1158,18 @@ export default {
handleUpdate() {
getDevice(this.id).then(response => {
this.form = response.data
// if (this.form.selectedOptions != null && this.form.selectedOptions !== '') {
this.form.selectedOptions = response.data.addressCode.split(',').map(Number)
console.log('查询到的地址信息', this.form.selectedOptions)
//
// }
// if (this.form.serviceArea != null && this.form.serviceArea !== '') {
console.log('this.form.serviceArea', response.data.serviceArea)
// this.form.serviceAreaText = selectDictLabels(this.dict.type.service_area, this.form.serviceArea)
console.log(' this.form.serviceAreaText', this.form.serviceAreaText)
// console.log('查询到的地址信息', this.form.selectedOptions)
// console.log('this.form.serviceArea', response.data.serviceArea)
// console.log(' this.form.serviceAreaText', this.form.serviceAreaText)
this.form.serviceArea = response.data.serviceArea.split(';')
// const data = '1,32,368;1,33,372;1,33,373;1,33,374;1,33,375'
// const dataArray = data.split(';')
// const resultArr = []
console.log(' this.areaOptions--------------------------', this.areaOptions)
// for (let i = 0; i < this.form.serviceArea.length; i++) {
// // const name = getAreNameById({ idList: dataArray[i] })
// getAreNameById({ idList: this.form.serviceArea[i] }).then(response => {
// let addressText = ''
// for (let i = 0; i < response.data.length; i++) {
// addressText += response.data[i].nameLocal
// }
// resultArr.push(addressText)
// })// 假设 getName() 方法接收一个参数,将每一项传递给它
// }
// console.log('dataArray--------------', resultArr)
// for (let i=0;i<this.form.serviceArea.length;i++){
// let name = getAreNameById()
// }
console.log('支持检查地区回显值', this.form.serviceArea)
if (this.form.checkType != null && this.form.checkType !== '') {
this.form.checkTypeText = selectDictLabels(this.dict.type.exam_type, this.form.checkType)
console.log(' this.form.checkTypeText', this.form.checkTypeText)
this.form.checkType = response.data.checkType.split(',')
this.form.checkType = response.data.checkType.split(',').map(Number)
console.log('this.form.checkType', this.form.checkType)
}
if (this.form.useTime != null && this.form.useTime !== '') {
......
......@@ -88,26 +88,26 @@
</el-button>
<el-button
icon="el-icon-finished"
class="fourWordsBtn"
class="fourWordswhiteBtn"
@click="selectAll()"
>选择全部
</el-button>
<el-button
icon="el-icon-back"
class="fourWordsBtn"
class="fourWordswhiteBtn"
@click="reverseSelect(deviceList)"
>反向选择
</el-button>
<el-button
v-hasPermi="['business:device:import']"
class="fourWordsBtn"
class="fourWordswhiteBtn"
icon="el-icon-download"
@click="handleImport"
>批量导入
</el-button>
<el-button
v-hasPermi="['business:device:export']"
class="fourWordsBtn"
class="fourWordswhiteBtn"
icon="el-icon-upload2"
@click="handleExport"
>批量导出
......@@ -371,6 +371,8 @@ export default {
deviceList: [],
// 弹出层标题
title: '',
// 查询检查项目下拉框传递的字段
itemType: '',
// 是否显示弹出层
open: false,
// 查询参数
......@@ -473,21 +475,24 @@ export default {
},
created() {
this.getList()
this.getItemByType()
this.getUserInfo()
},
methods: {
// 获取登陆人信息
getUserInfo() {
getInfo().then(res => {
console.log('-------------------', res)
this.userType = res.user.userType
console.log('this.userTyep', this.userType)
// this.userType = res.user.userType
// console.log('this.userTyep', this.userType)
if (this.userType === '3') {
this.orderShow = false
this.itemType = 0
}
if (this.userType === '00') {
this.serviceShow = false
this.itemType = 3
}
this.getItemByType()
})
},
// 显示两位数字
......@@ -542,43 +547,6 @@ export default {
})
},
// // 取消按钮
// cancel() {
// this.open = false
// this.reset()
// },
// // 表单重置
// reset() {
// this.daterangeCreateTime = ''
// this.serviceArea = ''
// this.form = {
// id: null,
// deviceCode: null,
// deptId: null,
// deviceName: null,
// head: null,
// phone: null,
// deviceType: null,
// checkType: null,
// isPrivate: null,
// serviceArea: null,
// reservationMethod: null,
// useTime: null,
// servicePrice: null,
// orderPrice: null,
// status: null,
// useNum: null,
// sort: null,
// delFlag: null,
// createBy: null,
// createTime: null,
// updateBy: null,
// updateTime: null,
// remark: null
//
// }
// this.resetForm('form')
// },
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
......@@ -698,7 +666,7 @@ export default {
},
// 获取检查项目下拉框
getItemByType() {
listItemByType({ itemType: null }).then(res => {
listItemByType({ itemType: this.itemType }).then(res => {
console.log('检查项目', res)
this.checkItemOptions = res.rows
console.log('xdddd', this.checkItemOptions)
......@@ -736,3 +704,8 @@ export default {
}
}
</script>
<style class="scss">
.app-container{
background-color: white;
}
</style>
......@@ -38,6 +38,7 @@
<el-col :span="8">
<!--宠物品种-->
<el-form-item label="宠物品种" prop="petBreed" class="petBreed">
<el-input v-model="detailInfo.petBreed" placeholder="暂无数据" disabled class="half__-5px" />
<el-input
v-model="detailInfo.petChildBreed"
placeholder="暂无数据"
......
......@@ -115,14 +115,14 @@
<!-- 缴费信息 -->
<el-row v-show="treatSchedule<=1">
<el-col :span="8">
<el-form-item label="代缴费金额">
<el-form-item label="标准价格">
<span>{{ keepTwoDecimals(checkDetail.payAmount) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="treatSchedule>1">
<el-col :span="8">
<el-form-item label="缴费金额">
<el-form-item label="支付金额">
<span>{{ keepTwoDecimals(checkDetail.payAmount) }}</span>
</el-form-item>
</el-col>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment