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

+/*
+ * @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>