Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dc81e656 1 parent b8598d93

✨ feat(修改方言类型组件): 新增模块

Inline Side-by-side
Showing 2 changed files with 271 additions and 0 deletions
/*
* @Date: 2022-06-20 12:56:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-20 15:41:41
* @FilePath: /tswj/src/api/B/localism.js
* @Description: 文件描述
*/
import { fn, fetch } from '@/api/fn';
const Api = {
LOCALISM_LIST_MODI: '/srv/?a=localism_list4modi',
ADD_LOCALISM: '/srv/?a=add_localism',
MODIFY_PROD_LOCALISM: '/srv/?a=modify_prod_localism',
}
/**
* @description 幼儿园方言列表
* @returns {*} data
*/
export const localismListModiAPI = (params) => fn(fetch.get(Api.LOCALISM_LIST_MODI, params));
/**
* @description 新增方言
* @param {string} localism_name
* @returns {*} data
*/
export const addLocalismAPI = (params) => fn(fetch.post(Api.ADD_LOCALISM, params));
/**
* @description 更新作品方言
* @param {string} prod_id
* @param {string} localism_name
* @returns {*} data
*/
export const modifyProdLocalismAPI = (params) => fn(fetch.post(Api.MODIFY_PROD_LOCALISM, params));
<!--
* @Date: 2022-06-20 11:35:50
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-20 16:51:47
* @FilePath: /tswj/src/components/LocalismBox/index.vue
* @Description: 调整作品方言弹框组件
-->
<template>
<van-overlay :show="show" z-index="1000">
<div class="wrapper" @click.stop>
<div class="block">
<div class="close">
<van-icon name="close" color="#FFFFFF" @click="handleClose" />
</div>
<div class="localism-title">{{ title }}</div>
<div id="localism-list" class="localism-list">
<div v-for="(item, index) in localismList" :id="item.id" :key="index"
:class="[item.checked ? 'checked' : 'unchecked', 'van-hairline--top-bottom', 'localism-item']"
@click="setLocalism(item.id)">
{{ item.localism }}
</div>
<div v-show="show_localism" id="localism-bottom" class="van-hairline--top-bottom localism-item">
<input v-model="localism_name" placeholder="请输入新增的方言名称" style="border: 0; text-align: center;"
@blur="onBlur">
</div>
</div>
<div class="bar">
<div class="button">
<my-button type="plain" @on-click="addLocalism">新增方言</my-button>
</div>
<div class="button">
<my-button type="primary" @on-click="handleSubmit">确定</my-button>
</div>
</div>
</div>
</div>
</van-overlay>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import MyButton from '@/components/MyButton/index.vue'
import { localismListModiAPI, addLocalismAPI, modifyProdLocalismAPI } from '@/api/B/localism'
import { Toast, Dialog, _ } from '@/utils/generatePackage.js'
const props = defineProps({
showLocalism: Boolean,
id: Number,
localism: String,
title: String,
type: String, // 值为pass说明是从通过按钮点击进入
})
const emit = defineEmits(['on-close', 'on-submit']);
/**
* 滚动到指定位置
* @param {*} id
*/
const scrollToDom = (id) => {
nextTick(() => {
document.getElementById(id)?.scrollIntoView({ block: 'center' });
})
}
// 处理语言列表数据
let localismList = ref([]);
const raw_id = ref('')
const getLocalismList = async () => {
const { data } = await localismListModiAPI();
localismList.value = data.map((item) => ({ id: item, localism: item, checked: false }))
localismList.value.forEach((item) => {
if (item.localism === props.localism) {
item.checked = true;
raw_id.value = item.id
}
});
scrollToDom(props.localism);
}
let show = ref(false);
watch(() => props.showLocalism, (v) => {
show.value = v;
if (v) {
getLocalismList()
}
})
// 点击行选择方言
const setLocalism = (v) => {
localismList.value.forEach((item) => {
item.checked = false;
});
localismList.value.forEach((item) => {
if (item.id === v) {
item.checked = true;
}
});
}
// 新增方言
const show_localism = ref(false)
const localism_name = ref('')
const addLocalism = () => { // 滚动到底部，显示新增输入框
show_localism.value = true;
const id = localismList.value[localismList.value.length - 1]['id'];
scrollToDom(id);
}
const onBlur = () => { // 失焦保存录入方言
if (!localism_name.value) return false;
Dialog.confirm({
title: '温馨提示',
message: `是否确认新增${localism_name.value}？`,
confirmButtonColor: '#11D2B1'
})
.then(async () => {
const { code } = await addLocalismAPI({ localism_name: localism_name.value });
if (code) {
Toast.success('新增成功！');
localismList.value.forEach((item) => {
item.checked = false;
});
localismList.value.push({ id: localism_name.value, localism: localism_name.value, checked: true });
scrollToDom(localism_name.value);
localism_name.value = '';
}
})
.catch(() => {
// on cancel
});
}
const clearAll = () => {
show.value = false
show_localism.value = false
localismList.value = []
localism_name.value = ''
}
const handleClose = () => { // 关闭提示框回调
clearAll();
emit('on-close', false)
}
const handleSubmit = () => { // 提交选择方言
const localism = localismList.value.filter((item) => item.checked === true);
// 原始和提交不一致请求接口提交
if (raw_id.value !== localism[0].id) {
Dialog.confirm({
title: '温馨提示',
message: `是否确认设置方言为${localism[0].id}？`,
confirmButtonColor: '#11D2B1'
})
.then(async () => {
const { code } = await modifyProdLocalismAPI({ prod_id: props.id, localism_name: localism[0].id });
if (code) {
Toast.success('更新成功！');
clearAll();
emit('on-submit', localism[0].id);
}
})
.catch(() => {
// on cancel
});
} else {
clearAll();
emit('on-submit', raw_id.value);
}
}
</script>
<style lang="less" scoped>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
text-align: center;
}
.block {
width: 80%;
// height: 25rem;
background-color: #fff;
border-radius: 10px;
padding: 1rem 0;
position: relative;
margin-top: 1rem;
margin-bottom: 5rem;
.close {
position: absolute;
top: -2rem;
right: 1rem;
font-size: 1.5rem;
}
}
.localism-title {
font-size: 1.25rem;
}
.localism-list {
margin-top: 2rem;
max-height: 20rem;
overflow: auto;
}
.bar {
display: flex;
align-items: center;
box-sizing: content-box;
background-color: white;
padding: 0.7rem;
.button {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 0 0.5rem;
}
}
.localism-item {
padding: 1rem;
text-align: center;
}
.checked {
color: #11d2b1;
}
.unchecked {
color: gray;
}
input::-webkit-input-placeholder {
color: #B0B0B0;
}
</style>