lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化报错

This commit is contained in:
zouzhibing 2022-06-10 15:09:53 +08:00
parent acbc11794a
commit 0e2da2d401
3 changed files with 328 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/views/table/components/comprehensive.vue
View File

@ -22,7 +22,7 @@
<el-form-item>
<el-button @click="reset(ruleFormRef)">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button link @click="isExpand=!isExpand" type="primary">{{ isExpand?'合并':'展开' }}<el-icon>
<el-button type="text" @click="isExpand=!isExpand">{{ isExpand?'合并':'展开' }}<el-icon>
<arrow-down v-if="!isExpand"/>
<arrow-up v-else/>
</el-icon></el-button>
@ -63,27 +63,28 @@
</div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
const props = defineProps({
columns: {
type: Array,
default: () => []
const emit = defineEmits(['reset','onSubmit','selection-change'])
let props = defineProps({
columns:{
type:Array,
default:()=>[]
},
data: {
type: Array,
default: () => []
data:{
type:Array,
default:()=>[]
},
loading: {
type: Boolean,
default: false
loading:{
type:Boolean,
default:false
}
})
const currentPage1 = ref(1)
const isExpand = ref(true)
const handleSizeChange = (val: number) => {
@ -94,26 +95,29 @@ const handleCurrentChange = (val: number) => {
currentPage1.value = val
}
const list = computed(() => {
const arr = JSON.parse(JSON.stringify(props.data))
return arr.splice((currentPage1.value - 1) * 10, 10)
const list = computed(()=>{
let arr = JSON.parse(JSON.stringify(props.data))
return arr.splice((currentPage1.value-1)*10,10)
})
const listLoading = ref(false)
const confirmEdit = (row) => {
const confirmEdit = (row)=>{
row.edit = false
}
const cancelEdit = (row) => {
const cancelEdit = (row)=>{
row.edit = false
}
const obj = {}
const search = []
for (const item of props.columns) {
if (item.inSearch) {
import { reactive } from 'vue'
let obj = {}
let search = []
for(let item of props.columns){
if(item.inSearch){
obj[item.name] = null
}
if (item.inSearch) {
if(item.inSearch){
search.push(item)
}
}
@ -121,36 +125,39 @@ const formSearchData = ref(search)
const formInline = reactive(obj)
const onSubmit = () => {
console.log('submit!', formInline)
emit('onSubmit', formInline)
console.log('submit!',formInline)
emit('onSubmit',formInline)
}
const reset = (formEl: FormInstance | undefined) => {
formSearchData.value.forEach(item => {
const reset = (formEl: FormInstance | undefined)=>{
formSearchData.value.forEach(item=>{
formInline[item.name] = null
})
emit('reset')
}
const deleteAction = (row) => {
const deleteAction = (row)=>{
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true
}
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
list.value = list.value.filter(item => item.id !== row.id)
ElMessage.success('删除成功')
})
.catch(() => {
.then(() => {
list.value = list.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
})
.catch(() => {
})
})
}
</script>
<style scoped>
.edit-input {

423
src/views/table/comprehensive.vue
View File

@ -73,244 +73,229 @@
</template>
<script lang="ts">
export default { name: 'comprehensive' };
</script>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import ComprehensiveTable from './components/comprehensive.vue'
export default { name: 'comprehensive' }
const loading = ref(true)
const data = []
for (let i = 0; i < 100; i++) {
data.push({
date: '2016-05-02',
name: '王五' + i,
price: 1 + i,
province: '上海',
admin: 'admin',
sex: i % 2 ? 1 : 0,
checked: true,
id: i + 1,
age: 0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
const column = [
{ type: 'selection', width: 60 },
{ name: 'id', label: 'id', width: 80 },
{
name: 'name',
label: '姓名',
inSearch: true,
valueType: 'input',
width: 80
},
{
name: 'age',
label: '年龄',
align: 'right'
},
{
name: 'sex',
label: '性别',
slot: true,
inSearch: true,
options: [{
value: 1,
label: '男'
}, {
value: 0,
label: '女'
}],
valueType: 'select'
},
{
name: 'price',
label: '价格',
inSearch: true,
valueType: 'input'
},
{
name: 'admin',
label: '账号',
inSearch: true,
valueType: 'input'
},
{
name: 'address',
label: '地址',
inSearch: true,
valueType: 'input'
},
{
name: 'date',
label: '日期',
sorter: true,
inSearch: true,
valueType: 'input'
},
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
{ name: 'operation', slot: true, fixed: 'right', width: 200 }
]
const list = ref(data)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
name: '',
sex: null,
price: null
})
const rules = reactive({
name: [
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
price: [
{ required: true, message: '请输入价格', trigger: 'blur' }
],
sex: [
import {ref, reactive, onMounted} from "vue";
import * as dayjs from 'dayjs'
import { ElMessage,ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
const loading = ref(true)
import ComprehensiveTable from './components/comprehensive.vue'
const data = []
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
const column = [
{ type:'selection', width:60 },
{ name: 'id', label: 'id',width:80, },
{ name: 'name',
label: '姓名',
inSearch:true,
valueType:'input',
width:80
},
{ name: 'age',
label: '年龄',
align:'right',
},
{ name: 'sex',
label: '性别',
slot:true,
inSearch:true,
options:[{
value:1,
label:'男'
},{
value:0,
label:'女'
}],
valueType:'select',
},
{
required: true,
message: '请选择性别',
trigger: 'change'
}
name: 'price',
label: '价格',
inSearch:true,
valueType:'input',
},
{ name: 'admin', label: '账号', inSearch:true,
valueType:'input',},
{ name: 'address', label: '地址', inSearch:true,
valueType:'input', },
{ name: 'date', label: '日期',sorter:true, inSearch:true,
valueType:'input', },
{ name: 'province', label: '省份' },
{ name: 'city', label: '城市' },
{ name: 'zip', label: '邮编' },
{ name: 'operation',slot:true,fixed:'right',width:200 }
]
})
const list = ref(data)
const dialogVisible = ref(false)
const title = ref('新增')
const rowObj = ref({})
const selectObj = ref([])
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
name: '',
sex: null,
price:null,
})
const handleClose = async (done: () => void) => {
await ruleFormRef.value.validate((valid, fields) => {
if (valid) {
const obj = {
id: Date.now(),
...ruleForm,
age: 0,
city: '普陀区',
address: '上海市普上海',
zip: 200333,
province: '上海',
admin: 'admin',
date: dayjs().format('YYYY-MM-DD')
const rules = reactive({
name: [
{ required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
],
price:[
{ required: true, message: '请输入价格', trigger: 'blur' },
],
sex: [
{
required: true,
message: '请选择性别',
trigger: 'change',
},
],
})
const dialogVisible = ref(false)
const title = ref('新增')
const rowObj = ref({})
const selectObj = ref([])
const handleClose = async (done: () => void) => {
await ruleFormRef.value.validate((valid, fields) => {
if (valid) {
let obj = {
id:Date.now(),
...ruleForm,
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333,
province: '上海',
admin:"admin",
date: dayjs().format('YYYY-MM-DD')
}
if (title.value === '新增') {
list.value = [obj, ...list.value]
if(title.value==='新增'){
list.value = [obj,...list.value]
ElMessage.success('添加成功')
} else {
list.value.forEach(item => {
if (item.id === rowObj.value.id) {
item.name = obj.name
item.sex = obj.sex
item.price = obj.price
}else {
list.value.forEach(item=>{
if(item.id===rowObj.value.id){
item.name=obj.name
item.sex=obj.sex
item.price=obj.price
}
})
}
dialogVisible.value = false
console.log('submit!', obj)
} else {
console.log('error submit!', fields)
}
})
}
const add = () => {
title.value = '新增'
dialogVisible.value = true
}
const batchDelete = () => {
if (!selectObj.value.length) {
return ElMessage.error('未选中任何行')
dialogVisible.value = false
console.log('submit!',obj)
} else {
console.log('error submit!', fields)
}
})
}
ElMessageBox.confirm(
'你确定要删除选中项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true
}
)
.then(() => {
ElMessage.success('模拟删除成功')
list.value = list.value.concat([])
})
.catch(() => {
})
}
const selectionChange = (val) => {
selectObj.value = val
}
const add = ()=>{
title.value='新增'
dialogVisible.value = true
}
const edit = (row) => {
title.value = '编辑'
rowObj.value = row
dialogVisible.value = true
ruleForm.name = row.name
ruleForm.sex = row.sex
ruleForm.price = row.price
}
const batchDelete = ()=>{
if(!selectObj.value.length){
return ElMessage.error('未选中任何行')
}
ElMessageBox.confirm(
'你确定要删除选中项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
const del = (row) => {
console.log('row==', row)
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true
}
)
.then(() => {
list.value = list.value.filter(item => item.id !== row.id)
ElMessage.success('删除成功')
loading.value = true
setTimeout(() => {
loading.value = false
}, 500)
})
.catch(() => {
ElMessage.success('模拟删除成功')
list.value = list.value.concat([])
})
.catch(() => {
})
}
})
}
const selectionChange = (val)=>{
selectObj.value = val
}
const reset = () => {
loading.value = true
setTimeout(() => {
loading.value = false
}, 500)
ElMessage.success('触发重置方法')
}
const edit = (row)=>{
title.value='编辑'
rowObj.value = row
dialogVisible.value = true
ruleForm.name = row.name
ruleForm.sex = row.sex
ruleForm.price = row.price
}
const onSubmit = (val) => {
console.log('val===', val)
ElMessage.success('触发查询方法')
loading.value = true
setTimeout(() => {
loading.value = false
}, 500)
}
const del = (row)=>{
console.log('row==',row)
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
list.value = list.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
})
.catch(() => {
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 500)
})
})
}
const reset = ()=>{
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
ElMessage.success('触发重置方法')
}
const onSubmit = (val)=>{
console.log('val===',val)
ElMessage.success('触发查询方法')
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
}
onMounted(()=>{
setTimeout(()=>{
loading.value = false
},500)
})
</script>
<style scoped>

143
src/views/table/inline-edit-table.vue
View File

@ -90,90 +90,93 @@
</template>
<script lang="ts">
export default { name: 'inline-table' };
</script>
<script lang="ts" setup >
import { computed, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {computed, ref} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
const data = [
]
for(let i=0;i<100;i++){
data.push({
date: '2016-05-02',
name: '王五'+i,
price: 1+i,
province: '上海',
admin:"admin",
sex:i%2?1:0,
checked:true,
id:i+1,
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
age:0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
})
}
export default { name: 'inline-table' }
const data = [
]
for (let i = 0; i < 100; i++) {
data.push({
date: '2016-05-02',
name: '王五' + i,
price: 1 + i,
province: '上海',
admin: 'admin',
sex: i % 2 ? 1 : 0,
checked: true,
id: i + 1,
img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
age: 0,
city: '普陀区',
address: '上海市普上海',
zip: 200333
const currentPage1 = ref(1)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const transData = ref(data)
const loading = ref(false)
const list = computed(()=>{
let arr = JSON.parse(JSON.stringify(transData.value))
return arr.splice((currentPage1.value-1)*10,10)
})
}
const currentPage1 = ref(1)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
currentPage1.value = val
}
const transData = ref(data)
const loading = ref(false)
const listLoading = ref(false)
const list = computed(() => {
const arr = JSON.parse(JSON.stringify(transData.value))
return arr.splice((currentPage1.value - 1) * 10, 10)
})
const confirmEdit = (row)=>{
row.edit = false
}
const listLoading = ref(false)
const cancelEdit = (row)=>{
row.edit = false
}
const confirmEdit = (row) => {
row.edit = false
}
import { reactive } from 'vue'
const cancelEdit = (row) => {
row.edit = false
}
const formInline1 = reactive({
username: '',
})
const formInline1 = reactive({
username: ''
})
const onSubmit = () => {
console.log('submit!')
loading.value = true
setTimeout(()=>{
loading.value = false
},500)
}
const onSubmit = () => {
console.log('submit!')
loading.value = true
setTimeout(() => {
loading.value = false
}, 500)
}
const deleteAction = (row)=>{
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true,
}
)
.then(() => {
transData.value = transData.value.filter(item=>item.id!==row.id)
ElMessage.success('删除成功')
})
.catch(() => {
const deleteAction = (row) => {
ElMessageBox.confirm(
'你确定要删除当前项吗?',
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
draggable: true
}
)
.then(() => {
transData.value = transData.value.filter(item => item.id !== row.id)
ElMessage.success('删除成功')
})
.catch(() => {
})
})
}
}
</script>