1. 端口要和后端接口一致才能调通 否则 ：
404 传参错误 是否和后端 对接<br /> 403 跨域 vue.config.js 解决 <br /> 入参必须和后端的参数一致<br />
一致接口调成功 否则多一个 少一个不会去执行
2、 绑定 input 框 如果 后端返回的数据 是否一个对象里面的 还是多层对象包含着
列入 ： 一下
dataForm: {
pageNum: 1,
pageSize: 10,
params: {
shadowCode: '',
shadowName: '',
cityCode: ''
}
}
dataForm.params 下的 …… 参数值
方法如下 ： 
新增 ：
forData 下的所有值按照后台返回来的数据进行给 上面绑定
formData: {
shadowName: '', // 光影城名称
cityCode: '', // 城市编码
cityName: '', // 城市名称
parSize: '', // 园区大小
address: '', // 地址
positionX: '', // 位置坐标-X
postiionY: '', // 位置坐标-Y
phone: '', // 服务热线
openTime: '', // 开园时间
closeTime: '', // 关园时间
introduce: '', // 文字介绍
provinceCode: '',
regionCode: '',
field126: '',
field127: ''
},
项目部署
创建upload.js 项目部署完成
s'use strict'
// 引入scp2 项目部署
var client = require('scp2')
// 下面三个插件是部署的时候控制台美化所用 可有可无
const ora = require('ora')
const chalk = require('chalk')
const spinner = ora(chalk.green('正在发布到服务器...'))
spinner.start()
client.scp('./dist/', { // 本地打包文件的位置
'host': '117.78.43.223', // 服务器的IP地址
'port': '22', // 服务器端口， 一般为 22
'username': 'root', // 用户名
'password': 'shadowUat_20220413', // 密码
'path': '/opt/shadow/webshadow-pc/webapps/ROOT/WEB-INF/dist' // 项目部署的服务器目标位置
}, err => {
spinner.stop()
if (!err) {
console.log(chalk.green('项目发布完毕!'))
} else {
console.log('err', err)
}
})
pc 删除 注意一点
后端给你返回的 参数
删除
<el-button
:disabled="selectionTab.length === 0"
type="text"
size="small"
style="color: red"
@click="deleted(scope.row)"
>删除</el-button>
// 触发 cheBoke
//selectTable :[] 是一个空数组 定义
selectTable(selection) {
this.selectionTab = selection
},
// 删除 切记 ids 传的方式
deleted(id) {
this.$confirm('是否继续该操作', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteById({ ids: id.id }).then(() => {
this.$message({
type: 'success',
message: '操作成功!',
onClose: () => {
this.getDataList()
}
})
})
})
},
批量删除
deleteUpdata 是你的点击按钮
deleteBatches是你调用的接口
用jojn 拼接一下字符串
// 遍历数组 取出id 然后每个id的值绑定上ids名
// 最后在调用你的方法
let arrs = this.arr.map(item => ({ ids:item }))
let result = arrs.map(item => {
return `ids=${item.ids}`
})
let str = result.join('&')
代码如下 ：
参考
deleteUpdata() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 遍历数组 取出id 然后每个id的值绑定上ids名
const arrs = this.selectionTab.map(item => ({ ids: item.id }))
const result = arrs.map(item => {
// return `ids=${item.ids}`
return item.ids
})
console.log(result)
const str = result.join(',')
console.log(str)
// deleteBatches('ids =' + str + ',')
deleteBatches(str).then(res => {
this.$message({
type: 'info',
message: '删除成功'
})
console.log(res)
})
this.getDataList()
}).catch(() => {
})
},
修改
他是 post 请求格式 
绑定属性
方法如下 ：
// 修改
showEditDialog(id) {
console.log(id)
this.tagsView = true
this.$router.push({
path: '/systemSettings/organization/org/role/roleAddOrUpdata',
query: { roleId: JSON.stringify(id), isedtails: true }
})
},
新增页面去
// // 修改
在 created 里面去调用你的参数等......
const params = JSON.parse(this.$route.query?.roleId)
for (var i in this.formData) {
if (this.formData[i] === '') {
this.formData[i] = params[i]
}
console.log(params[i])
}
提交按钮
// 提交按钮
submitForm() {
this.getComputedStyle()
this.$refs['positiony'].validate((valid) => {
if (!valid) return
// 精华在这里
// 遍历一下 传入他的id 里面的数据 是否 === roleId的长度
if (Object.keys(JSON.parse(this.$route.query?.roleId)).length) {
// 修改
// 在用你调用的函数 去解析 this.$route.query?.roleId
modification({
...JSON.parse(this.$route.query?.roleId),
...this.formData
})
}
})
},
详情
这个是后端的接口我们在 api 封装一下
当前页面 传入 id query 对象 roIeId ： 解析 id
// 详情
addOrUpdate(id) {
this.tagsView = true
this.$router.push({
path: '/systemSettings/organization/org/role/roleAddOrUpdata',
query: { roleId: JSON.stringify(id), isedit: true }
})
particulars().then(res => {
console.log(id)
})
}
新增页面 图片如下
在里面写方法调用你里面的数据库
const id = JSON.parse(this.$route.query.roleId).id
particulars({ id }).then(value => {
this.formData = JSON.parse(JSON.stringify(value.data))
console.log(this.formData)
})
封面图 图片上传
:on-success="unOpen" 绑定你的属性值<br /> :data="{tag :'' }" 后台返回来的数据里面 tag 不介意shadowImg 'shadowImg' 传死值<br /> 参考图 如下 ： <br />
filesAction 是后台返回来的数据你调用一下
<el-col :span="24">
<el-form-item
label-width="129px"
:disabled="!$route.query.isedtails"
label="详细介绍及图片:"
prop="请填写详细介绍及图片"
required
>
<el-upload
ref="tag"
:file-list="tagfileList" // 空数组
:action="tagAction"
:headers="myHeaders"
:disabled="!$route.query.isedtails"
:before-upload="tagBeforeUpload"
list-type="picture-card"
:data="{tag :'shadowImg' }" //
name="files"
:on-success="unServe"
accept="image/*"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
在你的unServe 写方法
:headers=”myHeaders”
:headers="myHeaders" // headers引入你的方法
myHeaders: { 'pc-token':getToken(), branch:'center' }, // 传入你的 pc-token
图片上传 引入 util 里面的方法
代码如下 ： @/utils/auth
import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token_center'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
新增图片上传 数据 传唤
封面图片上传 回显
把图片解析了一下 在会回显上去 ```
新增页面 源代码
<template>
<div slot="header" class="clearfix" style="padding: 20px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>新增光影城 <span class="el-icon-close" @click="getBack" /></span>
</div>
<el-row :gutter="11">
<el-form
ref="positiony"
:model="formData"
size="mini"
label-width="95px"
label-position="left"
>
<el-col :span="20">
<el-form-item label="光影城名称" prop="shadowName">
<el-input
v-model="formData.shadowName"
placeholder="请输入光影城名称"
:disabled="!$route.query.isedtails"
clearable
:style="{ width: '60%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="省市区" prop="cityCode">
<el-cascader
v-model="selectedOptions"
:disabled="!$route.query.isedtails"
size="large"
:options="options"
:style="{ width: '60%' }"
@change="selectChange"
>
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="园区大小" prop="parkSize">
<el-input
v-model="formData.parkSize"
placeholder="请输入园区大小"
:disabled="!$route.query.isedtails"
clearable
:style="{ width: '60%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="地址" prop="address">
<el-input
v-model="formData.address"
placeholder="请输入地址"
:disabled="!$route.query.isedtails"
clearable
:style="{ width: '60%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="位置坐标" prop="positionX">
<el-input
v-model="formData.positionX"
:disabled="!$route.query.isedtails"
placeholder="请输入x轴"
clearable
:style="{ width: '100%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" prop="postiionY">
<el-input
v-model="formData.postiionY"
:disabled="!$route.query.isedtails"
placeholder="请输入y轴"
clearable
:style="{ width: '95%' }"
></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="7">
<el-form-item label="位置坐标" prop="positionX">
<el-input
v-model="formData.positionX"
:disabled="!$route.query.isedtails"
placeholder="请输入x轴"
clearable
:style="{ width: '80%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="" prop="postiionY">
<el-input
v-model="formData.postiionY"
:disabled="!$route.query.isedtails"
placeholder="请输入y轴"
clearable
:style="{ width: '40%' }"
></el-input>
<span>（从百度查询地址后找到xy坐标贴在这里）</span>
</el-form-item>
</el-col> -->
<el-col :span="20">
<el-form-item label="服务热线" prop="phone">
<el-input
v-model="formData.phone"
:disabled="!$route.query.isedtails"
placeholder="请输入服务热线"
clearable
:style="{ width: '60%' }"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开园时间" prop="openTime">
<el-time-select
v-model="formData.openTime"
placeholder="起始时间"
:disabled="!$route.query.isedtails"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
}"
>
</el-time-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" prop="closeTime">
<el-time-select
v-model="formData.closeTime"
:disabled="!$route.query.isedtails"
placeholder="结束时间"
:style="{ width: '95%' }"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
}"
>
</el-time-select>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="文字介绍" prop="introduce">
<el-input
v-model="formData.introduce"
:disabled="!$route.query.isedtails"
type="textarea"
placeholder="请输入文字介绍"
:autosize="{ minRows: 4, maxRows: 4 }"
:style="{ width: '60%' }"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item
label-width="129px"
:disabled="!$route.query.isedtails"
label="封面图:"
prop="请填写封面图"
required
>
<el-upload
ref="files"
:file-list="filesfileList"
:disabled="!$route.query.isedtails"
:action="filesAction"
:on-remove="handleRemove"
:headers="myHeaders"
:before-upload="filesBeforeUpload"
:on-preview="handlePictureCardPreview"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
:on-success="unOpen"
:limit="limit"
:data="{ tag: 'shadowImg' }"
name="files"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item
label-width="129px"
:disabled="!$route.query.isedtails"
label="详细介绍及图片:"
prop="请填写详细介绍及图片"
required
>
<el-upload
ref="tag"
:file-list="tagfileList"
:action="tagAction"
:headers="myHeaders"
:disabled="!$route.query.isedtails"
:before-upload="tagBeforeUpload"
list-type="picture-card"
:data="{tag :'shadowImg' }"
name="files"
:on-success="unServe"
accept="image/*"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
</el-card>
<div class="footer-submit">
<el-button
v-if="$route.query.isedtails"
size="small"
@click="resetForm"
>重置</el-button>
<el-button
v-if="$route.query.isedtails"
style="margin-right: 20px"
size="small"
type="primary"
@click="submitForm"
>提交</el-button>
<el-button
v-if="$route.query.isedit"
style="margin-right: 20px"
size="small"
type="primary"
@click="occlude"
>关闭</el-button>
</div>
</div>
</template>
<script>
// , particulars
import { getOrg, modification, particulars } from '@/api/roleManage.js'
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
import { getToken } from '@/utils/auth'
export default {
components: {
},
props: [],
data() {
return {
limit: 1,
options: provinceAndCityData,
selectedOptions: [],
formData: {
shadowName: '', // 光影城名称
cityCode: '', // 城市编码
cityName: '', // 城市名称
address: '', // 地址
positionX: '', // 位置坐标-X
postiionY: '', // 位置坐标-Y
phone: '', // 服务热线
openTime: '', // 开园时间
closeTime: '', // 关园时间
introduce: '', // 文字介绍
parkSize: '', // 园区大小
id: '',
coverImgId: '', // 后端返回的
detailImgIds: '',
// provinceCode: '',
// regionCode: '',
flies: '',
tag: ''
},
myHeaders: { 'pc-token': getToken(), branch: 'center' },
// 请输入 input 框
shadowName: [
{
required: true,
message: '请输入光影城名称',
trigger: 'blur'
}
],
cityCode: [
{
required: true,
message: '请选择所在城市',
trigger: 'change'
}
],
parkSize: [
{
required: true,
message: '请输入园区大小',
trigger: 'blur'
}
],
address: [
{
required: true,
message: '请输入地址',
trigger: 'blur'
}
],
positionX: [
{
required: true,
message: '请输入x轴',
trigger: 'blur'
}
],
postiionY: [
{
required: true,
message: '请输入y轴',
trigger: 'blur'
}
],
phone: [
{
required: true,
message: '请输入服务热线',
trigger: 'blur'
}
],
openTime: [
{
required: true,
message: '请选择开园时间',
trigger: 'change'
}
],
closeTime: [
{
required: true,
message: '请选择',
trigger: 'change'
}
],
filesAction: 'http://117.78.43.223:6001/backyard/file/sysAttachInfo/uploadFile/',
filesfileList: [],
tagAction: 'http://117.78.43.223:6001/backyard/file/sysAttachInfo/uploadFile/',
tagfileList: [],
cityCodeOptions: [
{
label: '选项一',
value: 1
},
{
label: '选项二',
value: 2
}
]
}
},
computed: {},
watch: {},
created() {
// 详情
const id = JSON.parse(this.$route.query.roleId).id
particulars({ id }).then(value => {
this.formData = JSON.parse(JSON.stringify(value.data))
// console.log(this.formData)
// 封面图 回显
this.filesfileList.push({
name: '',
url: this.formData.coverImg
})
console.log(this.filesfileList)
})
// // 修改
const params = JSON.parse(this.$route.query?.roleId)
for (var i in this.formData) {
if (this.formData[i] === '') {
this.formData[i] = params[i]
}
// console.log(params[i])
}
},
mounted() {
},
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleRemove(file) {
this.dataForm.attachIds.forEach((item, i) => {
if (file.response && file.response.data[0].attachId) {
if (item === file.response.data[0].attachId) {
this.dataForm.attachIds.splice(i, 1)
}
} else {
if (item === file.attachId) {
this.dataForm.attachIds.splice(i, 1)
}
}
})
},
// 封面图
unOpen(fileList) {
this.filesfileList = fileList
console.log(fileList)
},
// 回到主页面
getBack() {
this.$router.push('/taskCenter/supplierQualify')
},
occlude() {
this.$router.push('/taskCenter/supplierQualify')
},
selectChange(value, province, city, region) {
console.log(value)
this.formData.cityCode = value[1]
this.formData.cityName = CodeToText[value[1]]
},
submitForm() {
// console.log(this.filesfileList, this.tagfileList)
this.getComputedStyle()
this.$refs['positiony'].validate((valid) => {
if (!valid) return
if (Object.keys(JSON.parse(this.$route.query?.roleId)).length) {
// 修改
modification({
...JSON.parse(this.$route.query?.roleId),
...this.formData
})
}
})
},
// 重置
resetForm() {
this.$refs['positiony'].resetFields()
},
// 图片
filesBeforeUpload(file) {
const isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
const isAccept = new RegExp('image/*').test(file.type)
if (!isAccept) {
this.$message.error('应该选择image/*类型的文件')
}
return isRightSize && isAccept
},
tagBeforeUpload(file) {
const isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
const isAccept = new RegExp('image/*').test(file.type)
if (!isAccept) {
this.$message.error('应该选择image/*类型的文件')
}
return isRightSize && isAccept
},
// 新增
getComputedStyle() {
// 图片上传
const arr = []
// const phone = []
// 封面图
this.filesfileList.forEach(item => {
const attachId = item && item.response && item.response.data[0] && item.response.data[0].attachId || item.attachId || ''
if (attachId) {
arr.push(attachId)
}
})
// // 请填写详细介绍及图片
// this.tagfileList.forEach(item => {
// const attachId = item && item.response && item.response.data[0] && item.response.data[0].attachId || item.attachId || ''
// if (attachId) {
// phone.push(attachId)
// }
// })
this.formData.coverImgId = arr.join() // 后端返回的拼接
// this.formData.detailImgIds = phone.join()
getOrg(this.formData).then((res) => {
console.log(res)
})
}
}
}
</script>
<style lang="scss" scope>
.box-card {
height: 100%;
margin-bottom: 20px;
}
.el-upload__tip {
line-height: 1.2;
}
::v-deep .el-form-item is-required {
margin: 0px;
padding: 0px;
margin-left: 0px;
}
::v-deep .el-input__inner {
width: 255px;
}
.footer-submit {
position: fixed;
height: 60px;
line-height: 60px;
background-color: #fff;
width: 100%;
bottom: 0;
right: 0;
text-align: right;
z-index: 100;
}
</style>
主页面
<template>
<div class="app-container">
<el-form
ref="dataForm"
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<div class="cineplex">
<el-form-item label="影城编号 :" prop="shadowCode">
<el-input
v-model="dataForm.params.shadowCode"
maxlength="32"
placeholder="请输入"
style="width: 140px"
/>
</el-form-item>
<el-form-item label="影城名称 :" prop="shadowName">
<el-input
v-model="dataForm.params.shadowName"
maxlength="32"
placeholder="请输入"
style="width: 140px"
/>
</el-form-item>
<el-form-item label="省市区" prop="cityCode">
<el-cascader
v-model="selectedOptions"
size="large"
:options="options"
@change="selectChange"
>
</el-cascader>
</el-form-item>
</div>
<el-form-item>
<el-button
v-if="isAuth('taskCenter-customerQualify-search')"
size="small"
type="primary"
@click="searchUser()"
>搜索</el-button>
<el-button
v-if="isAuth('taskCenter-customerQualify-reset')"
size="small"
@click="resetData()"
>重置</el-button>
</el-form-item>
</el-form>
<div class="buttom">
<el-row class="Allbutton">
<el-col>
<el-button
v-if="isAuth('systemSettings-organization-roleManage-addRole')"
size="small"
type="primary"
@click="addOrUpdata()"
>新增影城</el-button>
</el-col>
</el-row>
<el-row class="Allbutton">
<el-col>
<el-button
size="small"
type="danger"
:disabled="selectionTab.length === 0"
@click="deleteUpdata()"
>批量删除</el-button>
</el-col>
</el-row>
</div>
<el-table
ref="dataTable"
element-loading-text="Loading"
:data="dataList"
style="width: 100%"
@selection-change="selectTable"
>
<el-table-column type="selection" align="center" width="55">
</el-table-column>
<el-table-column
prop="shadowCode"
header-align="center"
align="center"
label="影城编号"
width="80"
/>
<el-table-column
prop="shadowName"
header-align="center"
align="center"
label="影城名称"
width="140"
/>
<el-table-column
prop="cityName"
header-align="center"
align="center"
label="城市"
/>
<el-table-column
width="150"
prop="positionX"
header-align="center"
align="center"
label="位置坐标"
/>
<el-table-column
width="150"
prop="address"
header-align="center"
:show-overflow-tooltip="true"
align="center"
label="地址"
>
</el-table-column>
<el-table-column
prop="phone"
header-align="center"
align="center"
width="120"
label="服务热线"
>
</el-table-column>
<el-table-column
prop="parkSize"
header-align="center"
align="center"
label="园区大小"
>
</el-table-column>
<el-table-column
prop="openTime"
header-align="center"
align="center"
label="开园时间"
>
</el-table-column>
<el-table-column
width="150"
prop="createTime"
header-align="center"
align="center"
label="创捷日期"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="200px"
>
<template slot-scope="scope">
<el-button
v-if="isAuth('systemSettings-organization-roleManage-edit')"
type="text"
size="small"
@click="addOrUpdata(scope.row.roleId)"
>开通管理员</el-button>
<el-button
type="text"
size="small"
@click="showEditDialog(scope.row)"
>修改</el-button>
<el-button
type="text"
size="small"
@click="addOrUpdate( scope.row)"
>详情</el-button>
<el-button
type="text"
size="small"
style="color: red"
@click="deleted(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="dataForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="dataForm.pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
/>
<router-view />
</div>
</template>
<script>
// ,
import { getList, deleteById, deleteBatches, particulars } from '@/api/roleManage'
import { provinceAndCityData } from 'element-china-area-data'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: {
// eslint-disable-next-line vue/no-unused-components
provinceAndCityData
},
data() {
return {
arr: [],
selectedRowKeys: [], // table中选中的向，
ids: '', // 定义一个存放id的容器
options: provinceAndCityData,
selectedOptions: [],
selectionTab: [], // 列表选中的数据
dataListSelections: [],
normalizer: null, // 城市请选择
listLoading: true,
dataList: [],
totalPage: 0,
id: '',
//
dataForm: {
pageNum: 1,
pageSize: 10,
params: {
shadowCode: '',
shadowName: '',
cityCode: ''
}
}
}
},
computed: {},
mounted() {
},
created() {
this.getDataList()
},
methods: {
// 省市区
selectChange(value) {
console.log(value)
this.dataForm.params.cityCode = value[1]
},
// 调用方法
getDataList() {
this.listLoading = true
getList(this.dataForm).then((res) => {
this.dataList = res.data.result
this.totalPage = res.data.total
this.listLoading = false
})
},
// 触发 cheBoke
selectTable(selection) {
this.selectionTab = selection
},
// 搜索用户
searchUser() {
this.getDataList()
},
// // 重置
resetData() {
// this.dataForm = Object.assign({}, dataForm);
this.dataForm.pageNum = 1
this.dataForm.params.shadowName = ''
this.dataForm.params.shadowCode = ''
this.dataForm.params.cityCode = ''
this.getDataList()
},
// 每页数
sizeChangeHandle(val) {
this.dataForm.pageSize = val
this.dataForm.pageNum = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.dataForm.pageNum = val
this.getDataList()
},
// 新增/编辑 角色
addOrUpdata(id) {
this.tagsView = false
this.$router.push({
path: '/systemSettings/organization/org/role/roleAddOrUpdata',
query: { roleId: id, isedtails: true }
})
},
// 批量删除
deleteUpdata() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 遍历数组 取出id 然后每个id的值绑定上ids名
const arrs = this.selectionTab.map(item => ({ ids: item.id }))
const result = arrs.map(item => {
// return `ids=${item.ids}`
return item.ids
})
console.log(result)
const str = result.join(',')
console.log(str)
// deleteBatches('ids =' + str + ',')
deleteBatches(str).then(res => {
this.$message({
type: 'info',
message: '删除成功'
})
console.log(res)
})
this.getDataList()
}).catch(() => {
})
},
// 删除
deleted(id) {
this.$confirm('是否继续该操作', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteById({ ids: id.id }).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
this.getDataList()
}).catch(() => {
console.log(123)
})
},
// 修改
showEditDialog(id) {
console.log(id)
this.tagsView = true
this.$router.push({
path: '/systemSettings/organization/org/role/roleAddOrUpdata',
query: { roleId: JSON.stringify(id), isedtails: true }
})
},
// 详情
addOrUpdate(id) {
this.tagsView = true
this.$router.push({
path: '/systemSettings/organization/org/role/roleAddOrUpdata',
query: { roleId: JSON.stringify(id), isedit: true }
})
particulars().then(res => {
console.log(id)
})
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .vue-treeselect__control {
line-height: 32px !important;
width: none;
}
::v-deep .el-form-item {
margin-bottom: 10px !important;
}
::v-deep .el-form-item__content {
width: 150px;
}
.buttom {
display: flex;
width: 170px;
justify-content: space-between;
margin-bottom: 10px;
}
.el-form {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
省市区
el-select el-option 绑定 设置属性
data 定义 在上面
若有收获，就点个赞吧
0 人点赞
