364 lines
9.3 KiB
Vue
364 lines
9.3 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { deleteAction, getAction, postAction, putAction } from '../../common/http';
|
|
import { showConfirmDialog, showToast } from 'vant';
|
|
|
|
const showPop = ref(false)
|
|
const list = ref([{}] as any[])
|
|
const listItem = ref({} as any)
|
|
const form = ref({} as any)
|
|
const form1 = ref({} as any)
|
|
const showSecond = ref(false)
|
|
|
|
onMounted(() => {
|
|
init()
|
|
})
|
|
|
|
function init() {
|
|
getAction('/craftCommentCategory').then((res : any) => {
|
|
if (res.code === 200) {
|
|
list.value = res.data
|
|
}
|
|
})
|
|
}
|
|
|
|
const onClickLeft = () => {
|
|
history.back()
|
|
}
|
|
const poClickLeft = () => {
|
|
showSecond.value = false
|
|
}
|
|
const onClickRight = () => {
|
|
showPop.value = true
|
|
form1.value = {}
|
|
}
|
|
const showLit = ref(false)
|
|
|
|
const poClickRight = () => {
|
|
showLit.value = true
|
|
form.value = { content: [{}] }
|
|
}
|
|
|
|
//选择类型
|
|
const onChange = (item : any) => {
|
|
if (item.type === 'Select') {
|
|
item.chooses = [{ value: '' }]
|
|
} else {
|
|
item.chooses = null
|
|
}
|
|
}
|
|
|
|
//查看
|
|
const toShowLit = (item : any) => {
|
|
listItem.value = item
|
|
showSecond.value = true
|
|
}
|
|
|
|
//编辑
|
|
const EditCate = (item : any) => {
|
|
showPop.value = true
|
|
form1.value = JSON.parse(JSON.stringify(item))
|
|
}
|
|
const submit = () => {
|
|
if (form1.value.categoryId) {
|
|
putAction('/craftCommentCategory', { id: form1.value.categoryId, category: form1.value.category }).then((res : any) => {
|
|
if (res.code === 200) {
|
|
init()
|
|
showPop.value = false
|
|
showToast('编辑成功！')
|
|
}
|
|
})
|
|
} else {
|
|
postAction('/craftCommentCategory', { category: form1.value.category }).then((res : any) => {
|
|
if (res.code === 200) {
|
|
init()
|
|
showPop.value = false
|
|
showToast('提交成功！')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
postAction('/craftComment', { categoryId: listItem.value.categoryId, ...form.value }).then((res : any) => {
|
|
if (res.code === 200) {
|
|
init()
|
|
listItem.value.subCategory.push(form.value)
|
|
showLit.value = false
|
|
showToast('提交成功！')
|
|
}
|
|
})
|
|
}
|
|
|
|
const del = (item : any) => {
|
|
showConfirmDialog({
|
|
title: '提示',
|
|
message: '是否确认删除？',
|
|
}).then(() => {
|
|
let url = '/craftCommentCategory/' + item.categoryId
|
|
deleteAction(url).then((res : any) => {
|
|
if (res.code === 200) {
|
|
init()
|
|
showToast('删除成功！')
|
|
} else {
|
|
showToast(res.msg)
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
});
|
|
}
|
|
const delSecond = (item : any, index : any) => {
|
|
showConfirmDialog({
|
|
title: '提示',
|
|
message: '是否确认删除？',
|
|
}).then(() => {
|
|
let url = '/craftComment/' + item.id
|
|
deleteAction(url).then((res : any) => {
|
|
if (res.code === 200) {
|
|
init()
|
|
listItem.value.subCategory.splice(index, 1)
|
|
showToast('删除成功！')
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="flex">
|
|
<van-nav-bar title="工艺要求维护" left-text="返回" left-arrow right-text="新增" @click-left="onClickLeft"
|
|
@click-right="onClickRight" />
|
|
<view class="grid-container">
|
|
<view class="grid-item">大类</view>
|
|
<view class="grid-item">操作</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="grid-container" v-for="(item,index) in list" :key="index">
|
|
<view class="grid-item">{{item.category}}</view>
|
|
<view class="grid-item" style="display: flex;align-items: center;justify-content: space-between;">
|
|
<text @click="EditCate(item)">编辑</text>
|
|
<text @click="toShowLit(item)">查看</text>
|
|
<text style="color: red;" @click="del(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<van-popup v-model:show="showSecond" style="width: 100%">
|
|
<view class="flex">
|
|
<van-nav-bar title="工艺要求维护" left-text="返回" left-arrow @click-left="poClickLeft" right-text="新增"
|
|
@click-right="poClickRight" />
|
|
<h3>{{listItem.category}}</h3>
|
|
<view class="grid-container">
|
|
<view class="grid-item">小类</view>
|
|
<view class="grid-item">操作</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="grid-container" v-for="(item,index) in listItem.subCategory" :key="index">
|
|
<view class="grid-item">{{item.subCategory}}</view>
|
|
<view class="grid-item">
|
|
<text style="color: red;" @click="delSecond(item,index)">删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-popup>
|
|
|
|
<van-popup v-model:show="showPop" style="width: 80%" round>
|
|
<view>
|
|
<h3 style="text-align: center">新增</h3>
|
|
<van-form @submit="submit">
|
|
<van-cell-group inset>
|
|
<van-field v-model="form1.category" name="大类" label="大类" colon label-width="4em"
|
|
:rules="[{ required: true, message: '请填写' }]" />
|
|
</van-cell-group>
|
|
<view class="a-c">
|
|
<van-button type="danger" @click="showPop=false">取消</van-button>
|
|
<van-button type="primary" native-type="submit">确认</van-button>
|
|
</view>
|
|
</van-form>
|
|
</view>
|
|
</van-popup>
|
|
|
|
<van-popup v-model:show="showLit" style="width: 80%" round>
|
|
<view>
|
|
<van-form @submit="onSubmit">
|
|
<van-cell-group inset>
|
|
<van-field v-model="form.subCategory" name="小类名称" label="小类名称" colon label-width="5em"
|
|
:rules="[{ required: true, message: '请填写' }]" />
|
|
<view class="a-b">
|
|
<van-button type="primary" @click="form.content.push({})">出厂需上传</van-button>
|
|
</view>
|
|
<view v-for="(item,index) in form.content" :key="index">
|
|
<view class="a-d">
|
|
<van-icon name="clear" color="red" size="25" @click="form.content.splice(index,1)" />
|
|
<van-field v-model="item.name" name="上传项名称" label="上传项名称" colon label-width="6em"
|
|
:rules="[{ required: true, message: '请填写' }]" />
|
|
</view>
|
|
<van-field name="上传项类型" label="上传项类型" type="number" colon label-width="6.5em" class="bor-n"
|
|
:rules="[{ required: true, message: '请填写' }]">
|
|
<template #input>
|
|
<van-radio-group v-model="item.type" direction="horizontal" @change="onChange(item)">
|
|
<van-radio name="Input">填空</van-radio>
|
|
<van-radio name="Select">选择</van-radio>
|
|
</van-radio-group>
|
|
</template>
|
|
</van-field>
|
|
<template v-if="item.type=='Input'">
|
|
<van-field name="填写内容" label="填写内容" colon label-width="6.5em" class="bor-n">
|
|
<template #input>
|
|
<van-checkbox-group v-model="item.blank" direction="horizontal" shape="square">
|
|
<van-checkbox name="Text">文字</van-checkbox>
|
|
<van-checkbox name="File">图片</van-checkbox>
|
|
</van-checkbox-group>
|
|
</template>
|
|
</van-field>
|
|
</template>
|
|
<template v-for="(itemSecond,indexSecond) in item.chooses" :key="indexSecond"
|
|
v-if="item.type=='Select'">
|
|
<view class="a-d-1">
|
|
<van-icon name="add" color="red" size="25" v-if="indexSecond===0"
|
|
@click="item.chooses.push({})" />
|
|
<van-icon name="clear" color="red" size="25" v-if="indexSecond!=0"
|
|
@click="item.chooses.splice(indexSecond,1)" />
|
|
<van-field v-model="itemSecond.value" name="选项内容" label="选项内容" colon label-width="5em"
|
|
:rules="[{ required: true, message: '请填写' }]" />
|
|
</view>
|
|
</template>
|
|
<van-field name="是否必填" label="是否必填" colon label-width="6.5em" class="bor-n"
|
|
:rules="[{ required: true, message: '请填写' }]">
|
|
<template #input>
|
|
<van-radio-group v-model="item.necessary" direction="horizontal">
|
|
<van-radio name="true">必填</van-radio>
|
|
<van-radio name="false">选填</van-radio>
|
|
</van-radio-group>
|
|
</template>
|
|
</van-field>
|
|
</view>
|
|
</van-cell-group>
|
|
<view class="a-c">
|
|
<van-button type="danger" @click="showPop=false">取消</van-button>
|
|
<van-button type="primary" native-type="submit">确认</van-button>
|
|
</view>
|
|
</van-form>
|
|
</view>
|
|
</van-popup>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
margin: 0 15rpx;
|
|
|
|
.van-nav-bar {
|
|
width: 100%;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
|
|
.grid-item {
|
|
border: 1rpx solid #f2f2f2;
|
|
text-align: center;
|
|
padding: 5rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
::v-deep .van-cell-group--inset {
|
|
margin: 0;
|
|
}
|
|
|
|
::v-deep .van-popup--center {
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
.a-b {
|
|
margin: 10rpx;
|
|
|
|
::v-deep .van-button--normal {
|
|
padding: 5px 8px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
::v-deep .van-field {
|
|
font-size: 16px;
|
|
}
|
|
|
|
::v-deep .van-field__body {
|
|
border-bottom: 1rpx solid #d7d7d7;
|
|
}
|
|
|
|
::v-deep .van-field__control {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bor-n {
|
|
::v-deep .van-field__body {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
::v-deep .van-field__label {
|
|
text-align: end !important;
|
|
}
|
|
|
|
.a-c {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin: 30rpx;
|
|
|
|
::v-deep .van-button--normal {
|
|
padding: 0 15rpx !important;
|
|
height: 60rpx !important;
|
|
}
|
|
}
|
|
|
|
.a-d-1 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 30rpx;
|
|
|
|
::v-deep .van-button--normal {
|
|
padding: 8rpx;
|
|
height: 50rpx;
|
|
width: 7em;
|
|
}
|
|
|
|
::v-deep .van-cell {
|
|
padding: 10rpx 0;
|
|
}
|
|
}
|
|
|
|
.a-d {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
::v-deep .van-button--normal {
|
|
padding: 8rpx;
|
|
height: 50rpx;
|
|
width: 7em;
|
|
}
|
|
|
|
::v-deep .van-cell {
|
|
padding: 10rpx 0;
|
|
}
|
|
}
|
|
</style> |