1

src/assets/svg/select/delete.svg

+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_663_3034)">
+<path d="M3.79229 2.69655V1.49655C3.79229 1.11754 4.09929 0.810547 4.47829 0.810547H9.39029C9.76829 0.810547 10.0753 1.11754 10.0753 1.49655V2.69655H12.3213C12.4634 2.69655 12.5998 2.75302 12.7003 2.85354C12.8008 2.95406 12.8573 3.09039 12.8573 3.23255C12.8573 3.3747 12.8008 3.51103 12.7003 3.61155C12.5998 3.71207 12.4634 3.76854 12.3213 3.76854H11.7623V11.9825C11.7623 12.0726 11.7446 12.1618 11.7101 12.2451C11.6756 12.3283 11.6251 12.4039 11.5614 12.4676C11.4977 12.5313 11.422 12.5819 11.3388 12.6163C11.2556 12.6508 11.1664 12.6686 11.0763 12.6686H2.57529C2.39335 12.6686 2.21887 12.5963 2.09021 12.4676C1.96156 12.339 1.88929 12.1645 1.88929 11.9825V3.76855H1.35729C1.21513 3.76855 1.0788 3.71208 0.978281 3.61156C0.877761 3.51104 0.821289 3.37471 0.821289 3.23255C0.821289 3.0904 0.877761 2.95406 0.978281 2.85354C1.0788 2.75302 1.21513 2.69655 1.35729 2.69655H3.79229ZM4.86428 2.69655H9.00429V1.88255H4.8643V2.69655H4.86428ZM10.6913 3.76854H2.96029V11.5965H10.6903V3.76854H10.6913ZM4.40729 5.44855H5.47829V10.1715H4.40729V5.44755V5.44855ZM6.25329 5.50555H7.32429V10.1715H6.25329V5.50555ZM8.09929 5.56354H9.17029V10.1715H8.10028V5.56354H8.09929Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_663_3034">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/select/selected.svg

+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6626 0.435547H1.52396C0.987528 0.435547 0.679515 1.04607 0.998149 1.4776L5.56747 7.66435C5.8288 8.01812 6.35776 8.01812 6.61909 7.66435L11.1884 1.4776C11.507 1.04607 11.199 0.435547 10.6626 0.435547Z" fill="white"/>
+</svg>

src/components/Admin/AdminPublicPage.vue

@@ -6,6 +6,12 @@
         <span class="page-header-title_2">{{ form.title_2 }}</span>
         <span class="page-header-title_2">{{ form.title_2 }}</span>
       </div>
       </div>
       <div class="admin-header-tool">
       <div class="admin-header-tool">
+        <template v-if="SelectedRows.length">
+          <RowPopup
+            :list="form.row_selected_options"
+            :len="SelectedRows.length"
+          ></RowPopup>
+        </template>
         <template v-if="form.refresh">
         <template v-if="form.refresh">
           <CustomButtom @click="onReload">
           <CustomButtom @click="onReload">
             刷新
             刷新
@@ -19,7 +25,7 @@
           </CustomButtom>
           </CustomButtom>
         </template>
         </template>
         <template v-if="form.add">
         <template v-if="form.add">
-          <CustomButtom>
+          <CustomButtom @click="onCreate">
             新增
             新增
             <template #icon> <AddSvg></AddSvg> </template>
             <template #icon> <AddSvg></AddSvg> </template>
           </CustomButtom>
           </CustomButtom>
@@ -85,6 +91,7 @@
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
 import TransitionView from './TransitionView.vue';
 import TransitionView from './TransitionView.vue';
+import RowPopup from './RowPopup.vue';
 import CustomButtom from './button.vue';
 import CustomButtom from './button.vue';
 import CustomSelect from '@/components/Admin/select.vue';
 import CustomSelect from '@/components/Admin/select.vue';
 import ResetSvg from '@/assets/svg/admin/reload.svg';
 import ResetSvg from '@/assets/svg/admin/reload.svg';
@@ -94,12 +101,14 @@ import { useStore } from 'vuex';
 import { getFilterParams } from '@/constants/admin_form';
 import { getFilterParams } from '@/constants/admin_form';
 import CustomTable from './table.vue';
 import CustomTable from './table.vue';
 import { onMounted, ref } from 'vue';
 import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 const props = defineProps<{
 const props = defineProps<{
   form: any;
   form: any;
   list: any[];
   list: any[];
 }>();
 }>();
 const emit = defineEmits(['reset', 'update:list']);
 const emit = defineEmits(['reset', 'update:list']);
 const store = useStore();
 const store = useStore();
+const router = useRouter();
 // 筛选盒子打开状态
 // 筛选盒子打开状态
 const filterBoxStatus = ref(false);
 const filterBoxStatus = ref(false);
 const defaultWidth = ref();
 const defaultWidth = ref();
@@ -137,6 +146,16 @@ const onFilter = () => {
 const ChangeList = (list: any[]) => {
 const ChangeList = (list: any[]) => {
   emit('update:list', list);
   emit('update:list', list);
 };
 };
+
+// 新增
+const onCreate = () => {
+  const { create_page } = props.form;
+  if (create_page) {
+    router.push({
+      path: create_page,
+    });
+  }
+};
 onMounted(() => {
 onMounted(() => {
   defaultWidth.value = adminFilter.value.offsetWidth;
   defaultWidth.value = adminFilter.value.offsetWidth;
 });
 });
@@ -163,6 +182,7 @@ onMounted(() => {
       color: #c5c5c5;
       color: #c5c5c5;
     }
     }
     .admin-header-tool {
     .admin-header-tool {
+      display: flex;
       & > :not(:last-child) {
       & > :not(:last-child) {
         margin-right: 12px;
         margin-right: 12px;
       }
       }

src/components/Admin/ConfirmDialog.vue

+<template>
+  <t-dialog
+    class="admin-confirm-dialog"
+    v-model:visible="visible"
+    placement="center"
+    attach="body"
+    :zIndex="6000"
+  >
+    <p class="admin-confirm-text">确定要执行{{ label }}操作?</p>
+    <template #footer>
+      <div class="admin-dialog-footer">
+        <CustomButtom @click="visible = false">取消</CustomButtom>
+        <CustomButtom @click="onConfirm">确定</CustomButtom>
+      </div>
+    </template>
+  </t-dialog>
+</template>
+
+<script lang="ts" setup>
+import CustomButtom from './button.vue';
+import { ref, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    label?: string;
+  }>(),
+  {
+    label: '',
+  }
+);
+const emit = defineEmits(['update:modelValue', 'confirm']);
+const visible = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (v) => {
+    visible.value = v;
+  }
+);
+watch(
+  () => visible.value,
+  (v) => {
+    emit('update:modelValue', v);
+  }
+);
+const onConfirm = () => {
+  visible.value = false;
+  emit('confirm');
+};
+</script>
+
+<style lang="less">
+.admin-confirm-dialog {
+  .t-dialog {
+    background: #181818;
+    border: none;
+    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
+  }
+  .admin-confirm-text {
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+    color: white;
+  }
+  .t-dialog__close {
+    color: white;
+  }
+  .admin-dialog-footer {
+    display: flex;
+    justify-content: center;
+    & > * {
+      margin: 0 40px;
+    }
+  }
+}
+</style>

src/components/Admin/PageEdit.vue

@@ -12,7 +12,7 @@
           <span class="edit-body-head-title">{{ form.body_title }}</span>
           <span class="edit-body-head-title">{{ form.body_title }}</span>
           <div class="edit-body-head-tool">
           <div class="edit-body-head-tool">
             <template v-if="form.back">
             <template v-if="form.back">
-              <CustomButton class="body-head-btn"
+              <CustomButton class="body-head-btn" @click="backTable"
                 >列表
                 >列表
                 <template #icon>
                 <template #icon>
                   <BackListSvg></BackListSvg>
                   <BackListSvg></BackListSvg>
@@ -126,9 +126,16 @@ import DeleteSvg from '@/assets/svg/edit/delete.svg';
 import EditInputSvg from '@/assets/svg/edit/editInput.svg';
 import EditInputSvg from '@/assets/svg/edit/editInput.svg';
 import CustomInput from './input.vue';
 import CustomInput from './input.vue';
 import TextToSpeechSvg from '@/assets/svg/form/textToSpeech.svg';
 import TextToSpeechSvg from '@/assets/svg/form/textToSpeech.svg';
+import { useRouter } from 'vue-router';
 const props = defineProps<{
 const props = defineProps<{
   form: any;
   form: any;
 }>();
 }>();
+const router = useRouter();
+const backTable = () => {
+  router.replace({
+    path: props.form.back_url,
+  });
+};
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">

src/components/Admin/RowPopup.vue

+<template>
+  <div>
+    <t-popup
+      v-model="visible"
+      placement="bottom"
+      trigger="click"
+      overlayClassName="seleced-row-popup"
+    >
+      <template #content>
+        <div
+          class="seleced-row-popup-content"
+          :class="{
+            'content-show': visible,
+          }"
+        >
+          <div
+            v-for="item in list"
+            :key="item.value"
+            class="row"
+            @click="RowClick(item)"
+          >
+            <template v-if="item.value == 'delete'">
+              <DeleteSvg></DeleteSvg>
+            </template>
+            <span>{{ item.label }}</span>
+          </div>
+        </div>
+      </template>
+      <div
+        class="selected-row-btn"
+        :class="{
+          'selected-row-show': visible,
+        }"
+      >
+        已选择{{ len }}项
+        <span class="selected-row-right-icon">
+          <SelectedSvg></SelectedSvg>
+        </span>
+      </div>
+    </t-popup>
+    <ConfirmDialog
+      v-model="dialog_visible"
+      :label="current_params.label"
+      @confirm="DialogConfirm"
+    ></ConfirmDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Popup as TPopup } from 'tdesign-vue-next';
+import SelectedSvg from '@/assets/svg/select/selected.svg';
+import DeleteSvg from '@/assets/svg/select/delete.svg';
+import ConfirmDialog from './ConfirmDialog.vue';
+
+const props = withDefaults(
+  defineProps<{
+    list?: any[];
+    len?: number;
+  }>(),
+  {
+    list: () => [],
+    len: 0,
+  }
+);
+const emit = defineEmits(['change']);
+const visible = ref(false);
+const dialog_visible = ref(false);
+const current_params = ref({});
+
+const RowClick = (item: any) => {
+  if (item.confirm) {
+    current_params.value = item;
+    // 打开确认弹窗
+    dialog_visible.value = true;
+  } else {
+    // 直接提交
+    emit('change', item.value);
+  }
+};
+
+// 点击了确认
+const DialogConfirm = () => {
+  console.log(current_params.value);
+};
+</script>
+
+<style lang="less">
+@import '@/style/variables.less';
+.seleced-row-popup {
+  .t-popup__content {
+    padding: 0;
+    margin-top: -1px !important;
+  }
+}
+.seleced-row-popup-content {
+  background: #2d2d2d;
+  min-width: 99px;
+  border: 1px solid @main-color-1;
+  border-radius: 3px;
+  .row {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: white;
+    cursor: pointer;
+    & > :nth-child(1) {
+      margin: 0 6px;
+    }
+  }
+}
+.content-show {
+  border-top-color: transparent;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.selected-row-btn {
+  background: #2d2d2d;
+  border: 1px solid @main-color-1;
+  border-radius: 3px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-weight: 400;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  .selected-row-right-icon {
+    line-height: 16px;
+    margin-left: 6px;
+  }
+}
+.selected-row-show {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-color: transparent;
+}
+</style>

src/components/Admin/button.vue

@@ -49,10 +49,12 @@ const props = withDefaults(
     color: #000000;
     color: #000000;
   }
   }
   .left-icon {
   .left-icon {
-    padding-right: 6px;
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
+    & > :nth-child(1) {
+      margin-right: 6px;
+    }
   }
   }
 }
 }
 </style>
 </style>

src/components/Admin/table.vue

@@ -88,6 +88,10 @@ const pageChange = (value: number) => {
   setLocalData(props.local_key, value, 'session');
   setLocalData(props.local_key, value, 'session');
   getLog();
   getLog();
 };
 };
+// 提交选中项
+const SubmitChoseRow = (list: any[] = []) => {
+  emit('ChoseList', list);
+};
 
 
 // 选择全部
 // 选择全部
 const CheckAll = () => {
 const CheckAll = () => {
@@ -96,31 +100,35 @@ const CheckAll = () => {
   });
   });
   if (is_check_all.value) {
   if (is_check_all.value) {
     // 通知父组件
     // 通知父组件
-    emit('ChoseList', tableList.list);
+    SubmitChoseRow(tableList.list);
   } else {
   } else {
-    emit('ChoseList', []);
+    SubmitChoseRow();
   }
   }
 };
 };
 
 
 // 选择行
 // 选择行
 const CheckOne = (row: any) => {
 const CheckOne = (row: any) => {
-  // 如果全部未选择
-  const not_check_list = tableList.list.filter(
-    (item: any) => item.is_check == false
-  );
-  if (not_check_list.length === tableList.list.length) {
-    emit('ChoseList', []);
+  let check_all_num = 0;
+  let not_check_num = 0;
+  // 判断是否全选或全不选
+  for (let i = 0; i < tableList.list.length; i++) {
+    let item = tableList.list[i];
+    if (item.is_check) {
+      check_all_num += 1;
     } else {
     } else {
-    // 找到所有选择项
-    const list = tableList.list.filter((item: any) => item.is_check == true);
-    emit('ChoseList', list);
+      not_check_num += 1;
     }
     }
-  // 判断是否全选
-  const check_list = tableList.list.filter(
-    (item: any) => item.is_check == true
-  );
-  if (check_list.length === tableList.list.length) {
+  }
+  if (check_all_num == tableList.list.length) {
     is_check_all.value = true;
     is_check_all.value = true;
+    SubmitChoseRow(tableList.list);
+  } else if (not_check_num == tableList.list.length) {
+    is_check_all.value = false;
+    SubmitChoseRow();
+  } else {
+    // 找到所有选择项
+    const list = tableList.list.filter((item: any) => item.is_check == true);
+    SubmitChoseRow(list);
   }
   }
 };
 };
 
 

src/pages/AILiveStreaming/DiscourseManagement/index.vue

@@ -47,6 +47,16 @@ const ManagementForm = reactive({
   checkbox: true,
   checkbox: true,
   // 编辑页面
   // 编辑页面
   edit_page: '/AILiveStreaming/DiscourseManagement/edit',
   edit_page: '/AILiveStreaming/DiscourseManagement/edit',
+  // 新增页面
+  create_page: '/AILiveStreaming/DiscourseManagement/create',
+  // 多选功能操作项
+  row_selected_options: [
+    {
+      label: '删除',
+      value: 'delete',
+      confirm: true,
+    },
+  ],
   // 表格columns-列
   // 表格columns-列
   table_columns: [
   table_columns: [
     {
     {

src/pages/AILiveStreaming/DiscourseManagementCreate/index.vue

+<template>
+  <PageEdit :form="ManagementForm"></PageEdit>
+</template>
+
+<script lang="ts" setup>
+import PageEdit from '@/components/Admin/PageEdit.vue';
+import { reactive } from 'vue';
+import { edit_page_key } from '@/constants/token';
+import { getLocalData, isDevContext } from '@/utils/tool';
+import { show_message } from '@/utils/tdesign_tool';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const imgs = {
+  fill: new URL('../../../assets/svg/form/edit.svg', import.meta.url).href,
+};
+// 新增组件--所有value为空
+const ManagementForm = reactive({
+  title: '话术管理',
+  title_2: '新增',
+  body_title: '新增',
+  // 是否显示返回列表页
+  back: true,
+  back_url: '/AILiveStreaming/DiscourseManagement',
+  // 能否删除,
+  delete: false,
+  // 删除api
+  // delete_api: isDevContext() ? '' : '',
+  // 能否提交
+  submit: true,
+  // 提交接口
+  submit_api: isDevContext() ? '' : '',
+  //能否重置
+  reset: true,
+  // 是否转换为语音
+  conversion: true,
+  // 播放音频
+  play_audio: true,
+  form_options: [
+    {
+      icon: imgs.fill,
+      title: '基础填写',
+      lists: [
+        {
+          type: 'text',
+          label: '标题',
+          name: 'title_1',
+          value: '',
+          //   是否禁用
+          disabled: false,
+        },
+        {
+          type: 'text',
+          label: '产品',
+          name: 'product_1',
+          value: '',
+        },
+      ],
+    },
+    // 文字转语音
+    {
+      icon: 'TextToSpeech',
+      title: '文字转语音',
+      lists: [
+        {
+          type: 'select',
+          label: '语言',
+          name: 'language_1',
+          placeholder: '请选择语言',
+          value: '',
+          align: 'left',
+          options: [
+            {
+              label: '中文',
+              value: 'cn',
+            },
+            {
+              label: '英语',
+              value: 'en',
+            },
+          ],
+        },
+        {
+          type: 'select',
+          label: '语音',
+          name: 'voice',
+          placeholder: '请选择语音',
+          value: '',
+          align: 'left',
+          options: [
+            {
+              label: '小微 (直播间专属)',
+              value: '123',
+            },
+            {
+              label: '小爱 (直播间专属)',
+              value: '12345',
+            },
+          ],
+        },
+        {
+          type: 'textarea',
+          label: '语音内容',
+          name: 'product_1',
+          placeholder: '请输入语音内容',
+          value: '',
+        },
+      ],
+    },
+  ],
+});
+</script>
+
+<style lang="less"></style>

src/router/modules/home.ts

@@ -148,6 +148,15 @@ export default [
                 '@/pages/AILiveStreaming/DiscourseManagementEdit/index.vue'
                 '@/pages/AILiveStreaming/DiscourseManagementEdit/index.vue'
               ),
               ),
           },
           },
+          // 新增话术
+          {
+            path: '/AILiveStreaming/DiscourseManagement/create',
+            name: 'DiscourseManagementCreate',
+            component: () =>
+              import(
+                '@/pages/AILiveStreaming/DiscourseManagementCreate/index.vue'
+              ),
+          },
           // 互动设置
           // 互动设置
           {
           {
             path: '/AILiveStreaming/InteractiveSetting',
             path: '/AILiveStreaming/InteractiveSetting',