cygx 管理

package.json

@@ -16,6 +16,7 @@
     "crypto-js": "^4.2.0",
     "element-plus": "2.4.4",
     "pinia": "^2.1.7",
+    "sortablejs": "^1.15.2",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0",
     "vue3-tree-org": "^4.2.2"

src/views/rai_manage/activityManage/activityManage.vue

@@ -145,7 +145,7 @@ export default {
       detailData: {}, //
       activityLabel: "",
       publishDate: "",
-      baseApi: process.env.API_ROOT,
+      baseApi: import.meta.env.VITE_APP_API_ROOT,
       isShowImgMeetingDlg: false,
       imgMeetingData: [],
     };

src/views/rai_manage/activityManage/components/addActivity.vue

@@ -351,7 +351,7 @@ export default {
       radioVisibleActivity: 2,
       decisionChecked: false,
       fileListAudio: [],
-      baseApi: process.env.API_ROOT,
+      baseApi: import.meta.env.VITE_APP_API_ROOT,
       activeIsState: "",
       addEditVideo: [],
       startUpload: false, //开始上传

src/views/rai_manage/activityManage/meetingManagement.vue

@@ -244,7 +244,7 @@ export default {
       return this.$route.path.indexOf("purchaser")!=-1?true:false
     },
     exportUser() {
-      return process.env.API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
     },
     isYiDongShow() {
       return this.isYidongConduct === 1 || this.excelType !== "CClass";

src/views/rai_manage/activityManage/onLineManage.vue

@@ -218,7 +218,7 @@ export default {
   },
   computed: {
     exportUser() {
-      return process.env.API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
     },
     isYiDongShow() {
       return this.isYidongConduct === 1 || this.excelType !== "CClass";

src/views/rai_manage/activityManage/practicalMeeting.vue

@@ -135,7 +135,7 @@ export default {
   },
   computed: {
     exportUser() {
-      return process.env.API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
     },
   },
   watch: {

src/views/rai_manage/activityManage/specialResearch.vue

@@ -205,7 +205,7 @@ export default {
       return;
       const res = await raiSpecial.specialInterested({ ActivityId: id });
       if (res.Ret === 200) {
-        this.exportInterest = `${process.env.API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${id}`;
+        this.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${id}`;
         this.$nextTick(() => {
           this.interestData = res.Data.List;
         });

src/views/rai_manage/activityManage/specialResearch/addResearch.vue

@@ -119,7 +119,7 @@ export default {
   props: {},
   data() {
     return {
-      baseApi: process.env.API_ROOT,
+      baseApi: import.meta.env.VITE_APP_API_ROOT,
       ruleForm: {
         theme: "", //主题
         industry: "", //行业

src/views/rai_manage/activityManage/specialResearch/determineTravel.vue

@@ -219,7 +219,7 @@ export default {
   props: {},
   data() {
     return {
-      baseApi: process.env.API_ROOT,
+      baseApi: import.meta.env.VITE_APP_API_ROOT,
       ruleForm: {
         theme: "", //主题
         industry: "", //行业

src/views/rai_manage/activityManage/specialResearch/particularsAll.vue

@@ -90,7 +90,7 @@ export default {
   computed: {
     exportUser() {
       let param_token = localStorage.getItem("auth") || "";
-      return process.env.API_ROOT + "/cygx/special/tripList?ActivityId=" + this.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/special/tripList?ActivityId=" + this.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
     },
   },
   watch: {

src/views/rai_manage/components/apply/RichTextMixins.js

@@ -26,9 +26,9 @@ export default {
         theme: "dark", //主题
         placeholderText: "请输入活动内容",
         language: "zh_cn", //国际化
-        imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
         imageDefaultWidth: false,
         quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
         toolbarVisibleWithoutSelection: true, //是否开启 不选中模式

src/views/rai_manage/components/apply/particularsDialog.vue

@@ -178,9 +178,9 @@ export default {
     // 下载
     exportUser() {
       if (this.Teleconference || this.subscribe == "预约外呼详情") {
-        return process.env.API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
+        return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
       } else {
-        return process.env.API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
+        return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&" + localStorage.getItem("auth") || "";
       }
     },
     // 手机号是否展示
@@ -354,7 +354,7 @@ export default {
     },
     // 专家/分析师电话会 下载名单 确定事件
     handleConfirmDownload() {
-      let url = process.env.API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&ExcelType=" + this.downloadTypeName + "&" + localStorage.getItem("auth") || "";
+      let url = import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + this.excelId + "&ExcelType=" + this.downloadTypeName + "&" + localStorage.getItem("auth") || "";
       let a = document.createElement("a"); // 创建a标签
       a.href = url; // 设置下载地址
       a.download = ""; // 设置下载文件名

src/views/rai_manage/components/generationAsk.vue

@@ -68,7 +68,7 @@ export default {
       } else {
         url = "/cygx/summaryManage/commentListExport?ArticleId=";
       }
-      return process.env.API_ROOT + url + this.generaitonId + "&" + localStorage.getItem("auth") || "";
+      return import.meta.env.VITE_APP_API_ROOT + url + this.generaitonId + "&" + localStorage.getItem("auth") || "";
     },
   },
   watch: {

src/views/rai_manage/components/reportComponents/RichTextMixins.js

@@ -27,9 +27,9 @@ export default {
         theme: "dark", //主题
         placeholderText: "请输入报告内容",
         language: "zh_cn", //国际化
-        imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
         imageDefaultWidth: false,
         quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
         toolbarVisibleWithoutSelection: true, //是否开启 不选中模式

src/views/rai_manage/components/richText.vue

@@ -70,9 +70,9 @@ export default {
         theme: "dark", //主题
         // placeholderText: this.isText,
         language: "zh_cn", //国际化
-        imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
         imageDefaultWidth: false,
         // imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
         quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项

src/views/rai_manage/components/selection/mixins.js

@@ -29,9 +29,9 @@ export default {
         theme: "dark", //主题
         placeholderText: "请输入文字描述",
         language: "zh_cn", //国际化
-        imageUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        videoUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url
-        fileUploadURL: process.env.API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
+        imageUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        videoUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url
+        fileUploadURL: import.meta.env.VITE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
         imageDefaultWidth: false,
         // imageEditButtons:['imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],
         quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项

src/views/rai_manage/components/special/specialResearchDlg.vue

@@ -116,7 +116,7 @@ export default {
     async interestDetails() {
       const res = await raiSpecial.specialInterested({ ActivityId: this.specialDetailId });
       if (res.Ret === 200) {
-        this.exportInterest = `${process.env.API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${this.specialDetailId}`;
+        this.exportInterest = `${import.meta.env.VITE_APP_API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${this.specialDetailId}`;
         this.$nextTick(() => {
           this.interestData = res.Data.List;
         });

src/views/rai_manage/cygxManage/applyUserList.vue

@@ -1,3 +1,128 @@
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/customDetail") {
+      sessionStorage.removeItem("applyUserListBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import { Search } from "@element-plus/icons-vue";
+import mPage from "@/components/mPage.vue";
+import intervewDia from "../components/interviewDia.vue";
+
+const router = useRouter();
+
+const statusArr = ref([
+  { name: "潜在用户", value: 1 },
+  { name: "ficc", value: 3 },
+  { name: "现有用户", value: 2 },
+]);
+
+const tableData = ref([]);
+const total = ref(0);
+const page_no = ref(sessionStorage.getItem("applyUserListBack") ? JSON.parse(sessionStorage.getItem("applyUserListBack")).page_no : 1);
+const pageSize = ref(10);
+
+/* 获取表格数据 */
+const getTableData = () => {
+  raiInterface
+    .applyList({
+      PageSize: pageSize.value,
+      CurrentIndex: page_no.value,
+      KeyWord: search_txt.value,
+      CustomType: custom_type.value,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        tableData.value = res.Data.List || [];
+        total.value = res.Data.Paging.Totals;
+      }
+    });
+};
+
+const custom_type = ref("");
+const search_txt = ref("");
+const showViewer = ref(false);
+const reviewList = ref([]);
+const isShowDia = ref(false); //处理弹窗
+const dealObj = ref({});
+
+/* 页码改变 */
+const handleCurrentChange = (page) => {
+  page_no.value = page;
+  getTableData();
+};
+/* 预览名片 */
+const previewImg = (item) => {
+  showViewer.value = true;
+  reviewList.value = item.BusinessCardUrl.split("#");
+};
+/* 关闭预览 */
+const closeViewer = () => {
+  reviewList.value = [];
+  showViewer.value = false;
+};
+const dealHandle = (item) => {
+  dealObj.value = item;
+  isShowDia.value = true;
+};
+/* 处理申请 */
+const dealApplyHandle = () => {
+  raiInterface
+    .delApply({
+      ApplyRecordId: dealObj.value.ApplyRecordId,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        // this.$message.success(res.Msg);
+        dealObj.value.Status = 1;
+        isShowDia.value = false;
+      }
+    });
+};
+// 申请内容
+const applicationContent = (item) => {
+  window.open(item.HttpUrl, "_blank");
+};
+
+watch(
+  [() => search_txt.value, () => custom_type.value],
+  () => {
+    page_no.value = 1;
+    getTableData();
+  },
+  {
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  if (sessionStorage.getItem("applyUserListBack")) {
+    let backData = JSON.parse(sessionStorage.getItem("applyUserListBack"));
+    search_txt.value = backData.keyword;
+    page_no.value = backData.page_no;
+  }
+  getTableData();
+});
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: page_no.value,
+    keyword: search_txt.value,
+  };
+  sessionStorage.setItem("applyUserListBack", JSON.stringify(backData));
+  next();
+});
+</script>
+
 <template>
   <div class="applyUserList_container">
     <div class="applyUserList_top">
@@ -5,33 +130,35 @@
         <el-option v-for="item in statusArr" :key="item.name" :label="item.name" :value="item.value"> </el-option>
       </el-select>
       <el-input placeholder="姓名/手机号/邮箱" v-model="search_txt" clearable style="max-width: 500px">
-        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        <template #prefix>
+          <el-icon class="el-input__icon"><search /></el-icon>
+        </template>
       </el-input>
     </div>
     <div class="applyUserList_cont">
       <el-table ref="userTable" :data="tableData" v-loading="isShowloadding" element-loading-text="数据加载中..." border>
         <el-table-column prop="RealName" label="姓名" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.RealName }}</span></template
           >
         </el-table-column>
         <el-table-column prop="Mobile" label="手机号" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.Mobile }}</span></template
           >
         </el-table-column>
         <el-table-column prop="Email" label="邮箱" align="center" min-width="120px">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.Email }}</span></template
           >
         </el-table-column>
         <el-table-column prop="CompanyName" label="客户名称" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span
               style="color: #409eff; cursor: pointer"
               v-if="scope.row.CompanyIdPay !== 1"
               @click="
-                $router.push({
+                router.push({
                   path: '/RaiDetail',
                   query: {
                     id: scope.row.CompanyIdPay,
@@ -44,172 +171,54 @@
           </template>
         </el-table-column>
         <el-table-column prop="SellerName" label="所属销售" align="center" width="125">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.SellerName }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="CreateTime" label="申请时间" width="160" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.CreateTime }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="CompanyIdTypeName" label="用户状态" min-width="130" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.CompanyIdTypeName }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="ApplicationSource" label="申请来源" width="115" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.ApplicationSource }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="Title" label="申请内容" min-width="130" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="applicationContent(scope.row)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" min-width="110">
-          <template slot-scope="scope">
-            <span class="editsty" v-if="scope.row.BusinessCardUrl" @click="previewImg(scope.row)">查看名片</span>
-            <span class="editsty" v-if="scope.row.Status === 0" @click="dealHandle(scope.row)">标记处理</span>
+          <template #default="scope">
+            <span class="editsty" style="margin-right: 10px" v-if="scope.row.BusinessCardUrl" @click="previewImg(scope.row)">查看名片</span>
+            <span class="editsty" style="margin-right: 10px" v-if="scope.row.Status === 0" @click="dealHandle(scope.row)">标记处理</span>
           </template>
         </el-table-column>
-        <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
-          <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
-          <span>暂无数据</span>
-        </div>
+        <template #empty>
+          <div style="line-height: 44px; margin: 60px 0; color: #999">
+            <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
+            <span>暂无数据</span>
+          </div>
+        </template>
       </el-table>
       <el-col :span="24" class="toolbar">
         <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </div>
     <!-- 图片预览 -->
-    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="reviewList" />
+    <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="reviewList" />
     <!-- 弹窗 -->
     <intervewDia :title="'deal'" :isShowDia="isShowDia" @cancel="isShowDia = false" @saveOver="dealApplyHandle" />
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-import ElImageViewer from "element-ui/packages/image/src/image-viewer";
-import intervewDia from "../components/interviewDia.vue";
-export default {
-  name: "",
-  components: { mPage, ElImageViewer, intervewDia },
-  watch: {
-    search_txt(newval) {
-      this.page_no = 1;
-      this.getTableData();
-    },
-    custom_type(newval) {
-      this.page_no = 1;
-      this.getTableData();
-    },
-  },
-  data() {
-    return {
-      custom_type: "",
-      statusArr: [
-        { name: "潜在用户", value: 1 },
-        { name: "ficc", value: 3 },
-        { name: "现有用户", value: 2 },
-      ],
-      tableData: [],
-      total: 0,
-      page_no: sessionStorage.getItem("applyUserListBack") ? JSON.parse(sessionStorage.getItem("applyUserListBack")).page_no : 1,
-      pageSize: 10,
-      search_txt: "",
-      showViewer: false,
-      reviewList: [],
-      isShowDia: false, //处理弹窗
-      dealObj: {},
-    };
-  },
-  /* 页面跳转前记录参数 */
-  beforeRouteLeave(to, form, next) {
-    let backData = {
-      page_no: this.page_no,
-      keyword: this.search_txt,
-    };
-    sessionStorage.setItem("applyUserListBack", JSON.stringify(backData));
-    next();
-  },
-  /* 页面进入前是否清除参数 */
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/customDetail") {
-      sessionStorage.removeItem("applyUserListBack");
-    }
-    next();
-  },
-  methods: {
-    /* 获取表格数据 */
-    getTableData() {
-      raiInterface
-        .applyList({
-          PageSize: this.pageSize,
-          CurrentIndex: this.page_no,
-          KeyWord: this.search_txt,
-          CustomType: this.custom_type,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.tableData = res.Data.List || [];
-            this.total = res.Data.Paging.Totals;
-          }
-        });
-    },
-    /* 页码改变 */
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getTableData();
-    },
-    /* 预览名片 */
-    previewImg(item) {
-      this.showViewer = true;
-      this.reviewList = item.BusinessCardUrl.split("#");
-    },
-    /* 关闭预览 */
-    closeViewer() {
-      this.reviewList = [];
-      this.showViewer = false;
-    },
-    dealHandle(item) {
-      this.dealObj = item;
-      this.isShowDia = true;
-    },
-    /* 处理申请 */
-    dealApplyHandle() {
-      raiInterface
-        .delApply({
-          ApplyRecordId: this.dealObj.ApplyRecordId,
-        })
-        .then((res) => {
-          if (res.Ret === 200) {
-            this.$message.success(res.Msg);
-            this.dealObj.Status = 1;
-            this.isShowDia = false;
-          }
-        });
-    },
-    // 申请内容
-    applicationContent(item) {
-      window.open(item.HttpUrl, "_blank");
-      console.log(item);
-    },
-  },
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("applyUserListBack")) {
-      let backData = JSON.parse(sessionStorage.getItem("applyUserListBack"));
-      this.search_txt = backData.keyword;
-      this.page_no = backData.page_no;
-    }
-    this.getTableData();
-  },
-};
-</script>
 <style lang="scss" scoped>
 .applyUserList_container {
   .applyUserList_top {

src/views/rai_manage/cygxManage/bannerCommon/addBannerDlg.vue

@@ -1,18 +1,146 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { AddTypes } from "./bannerData";
+import { raiInterface } from "@/api/api.js";
+import { useRoute, useRouter } from "vue-router";
+
+const router = useRouter();
+
+const props = defineProps({
+  addBannerVisible: {
+    type: Boolean,
+    default: false,
+  },
+  editBannerList: {
+    type: Object,
+  },
+  bannerVisibleText: {
+    type: String,
+    required: true,
+    default: "",
+  },
+});
+
+const addBannerForm = ref({
+  type: 1,
+  mainTitle: "",
+  twoTitle: "",
+  link: "",
+  imgUrl: "",
+  imgId: "",
+});
+
+
+watch(
+  () => props.bannerVisibleText,
+  (val) => {
+    val === "编辑" && getDetail();
+  }
+);
+
+const addTypes = computed(() => {
+  return AddTypes;
+});
+
+const labelName = computed(() => {
+  let type = addBannerForm.value.type;
+  let obj = {
+    name: type == 1 || type == 2 ? "报告链接" : type == 3 ? "视频" : type == 4 ? "音频" : "活动链接",
+    placeholder: type == 1 || type == 2 ? "请输入报告链接（网页版详情页地址）" : type == 3 || type == 4 ? "请输入网页版详情页地址" : "请输入活动链接（网页版详情页地址）",
+  };
+  return obj;
+});
+
+// 获取详情数据
+async function getDetail() {
+  const res = await raiInterface.getBannerDetail({
+    BannerId: props.editBannerList.BannerId,
+  });
+  if (res.Ret === 200) {
+    let { BannerType, ImgId, IndexImg, Link, Title, Subtitle } = res.Data.Detail;
+    addBannerForm.value = {
+      type: BannerType,
+      mainTitle: Title,
+      twoTitle: Subtitle,
+      link: Link,
+      imgUrl: IndexImg,
+      imgId: ImgId,
+    };
+  }
+}
+const emit = defineEmits(["showImgPop", "addBannerVisible", "bannerVisibleText"]);
+// 添加图片
+function handleshowChooseImgPop() {
+  emit("showImgPop");
+}
+const form = ref(null);
+// 弹框关闭事件
+function handleClose() {
+  form.value.resetFields();
+  addBannerForm.value = {
+    type: 1,
+    mainTitle: "",
+    twoTitle: "",
+    link: "",
+    imgUrl: "",
+    imgId: "",
+  };
+  emit("update:addBannerVisible", false);
+  emit("update:bannerVisibleText", "");
+}
+
+const rules = ref({
+  type: [{ required: true, message: "请选择报告类型", trigger: "change" }],
+  mainTitle: [{ required: true, message: "请输入标题内容", trigger: "blur" }],
+  link: [{ required: true, message: "请输入链接", trigger: "blur" }],
+  imgUrl: [{ required: true, message: "请选择背景图", trigger: "change" }],
+});
+// banner弹框的确认事件
+function addBannerHandler() {
+  form.value.validate(async (valid, fields) => {
+    if (valid) {
+      let params = {
+        BannerId: props.bannerVisibleText === "编辑" ? props.editBannerList.BannerId : 0,
+        BannerType: addBannerForm.value.type,
+        Title: addBannerForm.value.mainTitle,
+        Subtitle: addBannerForm.value.twoTitle,
+        Link: addBannerForm.value.link,
+        IndexImg: addBannerForm.value.imgUrl,
+        ImgId: addBannerForm.value.imgId,
+        ListType: props.editBannerList.ListType || props.editBannerList.name,
+      };
+      const res = await raiInterface.bannerPreserveAndPublish(params);
+      if (res.Ret === 200) {
+        this.$message.success("发布成功");
+        emit("preserveAndPublish", params);
+        handleClose();
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+}
+// 预览图片
+function handlePreviewImg() {
+  let obj = {
+    mainTitle: addBannerForm.value.mainTitle,
+    twoTitle: addBannerForm.value.twoTitle,
+  };
+  emit("previewImg", addBannerForm.value.imgId, obj);
+}
+// 跳转产品内测页面
+function addHaveReportRouter() {
+  let { href } = router.resolve({ path: "addHaveReport" });
+  window.open(href, "_blank");
+}
+</script>
+
 <template>
   <div class="add-banner-visible">
-    <el-dialog
-      :title="bannerVisibleText"
-      :visible.sync="addBannerVisible"
-      width="600px"
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      @close="handleClose"
-    >
+    <el-dialog :title="props.bannerVisibleText" v-model="props.addBannerVisible" width="600px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
       <el-form :model="addBannerForm" :rules="rules" ref="form" label-width="100px">
         <el-form-item label="添加类型:" prop="type">
-          <el-select :disabled="bannerVisibleText == '编辑'" v-model="addBannerForm.type" placeholder="请选择报告类型">
+          <el-select :disabled="props.bannerVisibleText == '编辑'" v-model="addBannerForm.type" placeholder="请选择报告类型">
             <el-option v-for="item in addTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
@@ -24,24 +152,12 @@
         </el-form-item>
         <el-form-item :label="`${labelName.name}:`" prop="link">
           <div style="display: flex; align-items: end">
-            <el-input
-              :disabled="bannerVisibleText == '编辑'"
-              type="textarea"
-              :rows="3"
-              :placeholder="labelName.placeholder"
-              v-model="addBannerForm.link"
-            >
-            </el-input>
+            <el-input :disabled="props.bannerVisibleText == '编辑'" type="textarea" :rows="3" :placeholder="labelName.placeholder" v-model="addBannerForm.link"> </el-input>
             <el-button v-if="addBannerForm.type === 2" type="primary" style="margin-left: 20px" @click="addHaveReportRouter">新建报告</el-button>
           </div>
         </el-form-item>
         <el-form-item label="背景图:" prop="imgUrl">
-          <el-image
-            style="width: 120px; height: 120px"
-            :src="require('@/assets/img/icons/add-img.png')"
-            v-if="!addBannerForm.imgUrl"
-            @click="handleshowChooseImgPop"
-          />
+          <el-image style="width: 120px; height: 120px" :src="require('@/assets/img/icons/add-img.png')" v-if="!addBannerForm.imgUrl" @click="handleshowChooseImgPop" />
           <div v-else style="display: flex; align-items: end">
             <div class="pre-img-box">
               <el-image style="width: 226px; height: 120px" :src="addBannerForm.imgUrl"> </el-image>
@@ -51,152 +167,16 @@
           </div>
         </el-form-item>
       </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="addBannerHandler">发 布</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="addBannerHandler(form)">发 布</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { AddTypes } from "./bannerData";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  props: {
-    addBannerVisible: {
-      type: Boolean,
-      default: false,
-    },
-    editBannerList: {
-      type: Object,
-    },
-    bannerVisibleText: {
-      type: String,
-      required: true,
-      default: "",
-    },
-  },
-  watch: {
-    bannerVisibleText: {
-      handler(val) {
-        val === "编辑" && this.getDetail();
-      },
-    },
-  },
-  data() {
-    return {
-      addBannerForm: {
-        type: 1,
-        mainTitle: "",
-        twoTitle: "",
-        link: "",
-        imgUrl: "",
-        imgId: "",
-      },
-      rules: {
-        type: [{ required: true, message: "请选择报告类型", trigger: "change" }],
-        mainTitle: [{ required: true, message: "请输入标题内容", trigger: "blur" }],
-        link: [{ required: true, message: "请输入链接", trigger: "blur" }],
-        imgUrl: [{ required: true, message: "请选择背景图", trigger: "change" }],
-      },
-      selectImgVisible: false,
-    };
-  },
-  computed: {
-    addTypes() {
-      return AddTypes;
-    },
-    labelName() {
-      let type = this.addBannerForm.type;
-      let obj = {
-        name: type == 1 || type == 2 ? "报告链接" : type == 3 ? "视频" : type == 4 ? "音频" : "活动链接",
-        placeholder:
-          type == 1 || type == 2
-            ? "请输入报告链接（网页版详情页地址）"
-            : type == 3 || type == 4
-            ? "请输入网页版详情页地址"
-            : "请输入活动链接（网页版详情页地址）",
-      };
-      return obj;
-    },
-  },
-  methods: {
-    // 获取详情数据
-    async getDetail() {
-      const res = await raiInterface.getBannerDetail({
-        BannerId: this.editBannerList.BannerId,
-      });
-      if (res.Ret === 200) {
-        let { BannerType, ImgId, IndexImg, Link, Title, Subtitle } = res.Data.Detail;
-        this.addBannerForm = {
-          type: BannerType,
-          mainTitle: Title,
-          twoTitle: Subtitle,
-          link: Link,
-          imgUrl: IndexImg,
-          imgId: ImgId,
-        };
-      }
-    },
-    // 添加图片
-    handleshowChooseImgPop() {
-      this.$emit("showImgPop");
-    },
-    // 弹框关闭事件
-    handleClose() {
-      this.$refs["form"].resetFields();
-      this.addBannerForm = {
-        type: 1,
-        mainTitle: "",
-        twoTitle: "",
-        link: "",
-        imgUrl: "",
-        imgId: "",
-      };
-      this.$emit("update:addBannerVisible", false);
-      this.$emit("update:bannerVisibleText", "");
-    },
-    // banner弹框的确认事件
-    addBannerHandler() {
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          let params = {
-            BannerId: this.bannerVisibleText === "编辑" ? this.editBannerList.BannerId : 0,
-            BannerType: this.addBannerForm.type,
-            Title: this.addBannerForm.mainTitle,
-            Subtitle: this.addBannerForm.twoTitle,
-            Link: this.addBannerForm.link,
-            IndexImg: this.addBannerForm.imgUrl,
-            ImgId: this.addBannerForm.imgId,
-            ListType: this.editBannerList.ListType || this.editBannerList.name,
-          };
-          const res = await raiInterface.bannerPreserveAndPublish(params);
-          if (res.Ret === 200) {
-            this.$message.success("发布成功");
-            this.$emit("preserveAndPublish", params);
-            this.handleClose();
-          }
-        }
-      });
-    },
-    // 预览图片
-    handlePreviewImg() {
-      let obj = {
-        mainTitle: this.addBannerForm.mainTitle,
-        twoTitle: this.addBannerForm.twoTitle,
-      };
-      this.$emit("previewImg", this.addBannerForm.imgId, obj);
-    },
-    // 跳转产品内测页面
-    addHaveReportRouter() {
-      let { href } = this.$router.resolve({ path: "addHaveReport" });
-      window.open(href, "_blank");
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .add-banner-visible {
   .pre-img-box {

src/views/rai_manage/cygxManage/bannerCommon/detailsDlg.vue

@@ -1,16 +1,62 @@
+<script setup>
+import { ref, watch, nextTick } from "vue";
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  tableDetailList: {
+    type: Array,
+    default: [],
+  },
+  detailsDlgVisible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+watch(
+  () => props.detailsDlgVisible,
+  (val) => {
+    val && this.getDetailData();
+  }
+);
+
+const tableList = ref([]);
+
+// 获取详情数据
+async function getDetailData() {
+  const res = await raiInterface.getBannerDetail({
+    BannerId: props.tableDetailList.BannerId,
+  });
+  if (res.Ret === 200) {
+    nextTick(() => {
+      tableList.value = [res.Data.Detail];
+    });
+  }
+}
+const emit = defineEmits(["detailsDlgVisible", "previewImg"]);
+
+// 关闭弹框
+function handleClose() {
+  emit("update:detailsDlgVisible", false);
+}
+function previewImg(item) {
+  let obj = {
+    mainTitle: item.Title,
+    twoTitle: item.Subtitle,
+  };
+  emit("previewImg", item.ImgId, obj);
+}
+// 下载pv/uv 地址
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/banner/PvExport?BannerId=" + id + "&" + localStorage.getItem("auth") || "";
+  return url;
+}
+</script>
+
 <template>
   <div class="">
     <!-- banner 详情的弹框 -->
-    <el-dialog
-      title="banner详情"
-      :visible.sync="detailsDlgVisible"
-      width="80%"
-      v-dialogDrag
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      @close="handleClose"
-    >
+    <el-dialog title="banner详情" v-model="props.detailsDlgVisible" width="80%" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
       <el-table style="margin-bottom: 30px" :data="tableList" border>
         <el-table-column align="center" prop="Sort" label="序号" width="80"></el-table-column>
         <el-table-column align="center" prop="BannerTypeName" label="类型" width="80"></el-table-column>
@@ -25,18 +71,18 @@
           </template>
         </el-table-column>
         <el-table-column align="center" prop="img" label="背景图" width="190">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <el-image @click="previewImg(row)" style="width: 160px; height: 60px" :src="row.IndexImg"> </el-image>
           </template>
         </el-table-column>
         <el-table-column align="center" label="状态" width="100">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             {{ row.Status === 1 ? "已发布" : "已下线" }}
           </template>
         </el-table-column>
         <el-table-column align="center" prop="ModifyTime" label="更新时间" width="180"></el-table-column>
         <el-table-column align="center" prop="pv" label="pv/uv" width="100">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div class="pv-uv-download">
               <span>{{ row.Pv }}/{{ row.Uv }}</span>
               <a :href="exportPvUv(row.BannerId)" download>
@@ -50,61 +96,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  props: {
-    tableDetailList: {
-      type: Array,
-      default: [],
-    },
-    detailsDlgVisible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  watch: {
-    detailsDlgVisible: {
-      handler(val) {
-        val && this.getDetailData();
-      },
-    },
-  },
-  data() {
-    return { tableList: [] };
-  },
-  methods: {
-    // 获取详情数据
-    async getDetailData() {
-      const res = await raiInterface.getBannerDetail({
-        BannerId: this.tableDetailList.BannerId,
-      });
-      if (res.Ret === 200) {
-        this.$nextTick(() => {
-          this.tableList = [res.Data.Detail];
-        });
-      }
-    },
-    // 关闭弹框
-    handleClose() {
-      this.$emit("update:detailsDlgVisible", false);
-    },
-    previewImg(item) {
-      let obj = {
-        mainTitle: item.Title,
-        twoTitle: item.Subtitle,
-      };
-      this.$emit("previewImg", item.ImgId, obj);
-    },
-    // 下载pv/uv 地址
-    exportPvUv(id) {
-      const url = process.env.API_ROOT + "/cygx/banner/PvExport?BannerId=" + id + "&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .pv-uv-download {
   display: flex;

src/views/rai_manage/cygxManage/bannerManage.vue

@@ -1,3 +1,333 @@
+<script setup>
+import { ref, computed, onMounted, nextTick } from "vue";
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessage,ElMessageBox } from "element-plus";
+import { BannerTableColumn } from "./bannerCommon/bannerData";
+import AddBannerDlg from "./bannerCommon/addBannerDlg.vue";
+import PreviewBanner from "./bannerCommon/previewBanner.vue";
+import DetailsDlg from "./bannerCommon/detailsDlg.vue";
+import Sortable from "sortablejs";
+
+const bannerTableColumn = computed(() => {
+  return BannerTableColumn;
+});
+
+const isDrag = computed(() => {
+  return statusValue.value == "1" ? true : false;
+});
+
+const dataList = ref([
+  { name: "A", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+  { name: "B", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+  { name: "C", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+]);
+const statusValue = ref("1");
+const statusOptions = ref([
+  {
+    label: "已发布",
+    value: "1",
+  },
+  {
+    label: "已下线",
+    value: "0",
+  },
+]); // 状态的筛选条件
+const tableList = ref([]); // 列表的数据
+
+
+
+const bannerVisibleText = ref("");
+const editBannerList = ref({});
+const addBannerRef = ref(null);
+// 获取列表数据
+function getDataList() {
+  dataList.value.forEach(async (item, index) => {
+    const res = await raiInterface.getBannerList({
+      PageSize: item.pageSize,
+      CurrentIndex: item.page_no,
+      ListType: item.name,
+      Status: statusValue.value,
+    });
+    if (res.Ret === 200) {
+      item.tableList = res.Data.List;
+      item.total = res.Data.Paging.Totals;
+    }
+  });
+}
+// 获取一个的单独数据 不想写if了
+async function getOneDataList(item) {
+  const res = await raiInterface.getBannerList({
+    PageSize: item.pageSize,
+    CurrentIndex: item.page_no,
+    ListType: item.name,
+    Status: statusValue.value,
+  });
+  if (res.Ret === 200) {
+    item.tableList = res.Data.List;
+    item.total = res.Data.Paging.Totals;
+  }
+}
+// 获取弹框图片的数据
+async function getSelectImgList() {
+  const res = await raiInterface.getBannerImgList({
+    CurrentIndex: page_no_img.value,
+    PageSize: 10,
+  });
+  if (res.Ret === 200) {
+    banerImgList.value = res.Data.List;
+    totalImg.value = res.Data.Paging.Totals;
+  }
+}
+
+const selectImgVisible = ref(false); //选择图片的弹框
+const banerImgList = ref([]); //选择图片的数据
+const banerImgListArr = ref([]); //选择图片的数据
+// 获取弹框图片的数据
+async function getSelectImgListAll() {
+  const res = await raiInterface.getBannerImgList({
+    CurrentIndex: 1,
+    PageSize: 100000,
+  });
+  if (res.Ret === 200) {
+    banerImgListArr.value = res.Data.List;
+    totalImg.value = res.Data.Paging.Totals;
+    banerImgList.value = _.cloneDeep(banerImgListArr.value).splice(0, 10);
+  }
+}
+
+
+const addBannerVisible = ref(false); // 添加编辑banner的弹框
+const isShowPreview = ref(false); // 预览的弹框
+const previewList = ref({}); // 预览的数据
+const detailsDlgVisible = ref(false); //详情的弹框
+const tableDetailList = ref({}); //详情的数据
+// 添加banner
+async function addHandlerBanner(type, item) {
+  bannerVisibleText.value = type;
+  addBannerVisible.value = true;
+  editBannerList.value = item;
+}
+
+
+// banner弹框的确认事件
+// function addBannerHandler() {
+//   this.$refs["form"].validate((valid) => {
+//     if (valid) {
+//     }
+//   });
+// }
+// // banner弹框的关闭事件
+// function handleClose() {
+//   this.$refs["form"].resetFields();
+//   this.popData = {
+//     type: "",
+//     showTime: "",
+//     order: "",
+//     link: "",
+//     imgUrl: "",
+//   };
+//   this.bannerVisible = false;
+// }
+
+
+// 点击选择添加图片事件
+function handleshowChooseImgPop() {
+  selectImgVisible.value = true;
+}
+// 点击图片的事件
+function clickSelectImg(item) {
+  addBannerRef.value.addBannerForm.imgUrl = item.IndexImg;
+  addBannerRef.value.addBannerForm.imgId = item.ImgId;
+  selectImgVisible = false;
+}
+// 筛选框的change事件
+function handleChange() {
+  dataList.value.forEach((item) => (item.page_no = 1));
+  getDataList();
+}
+
+const totalImg = ref(0);
+const page_no_img = ref(1);
+//分页
+async function handleCurrentChange(item, page) {
+  item.page_no = page;
+  getOneDataList(item);
+}
+// 选择图片的分页
+function handleCurrentChangeSelectImg(page) {
+  page_no_img.value = page;
+  getSelectImgList();
+}
+// 预览图片
+function handlePreviewImg(imgId, obj) {
+  banerImgListArr.value.forEach((item) => {
+    if (imgId === item.ImgId) {
+      previewList.value = { ...item, ...obj };
+    }
+  });
+  nextTick(() => {
+    isShowPreview.value = true;
+  });
+}
+// table下线的操作事件
+async function handleRowButton(item, row) {
+  ElMessageBox.confirm(`确定要下线此banner吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.bannerPublishAndcancel({ BannerId: row.BannerId });
+      if (res.Ret === 200) {
+        ElMessage.success("下线成功！");
+        let page_num = Math.ceil((item.total - 1) / item.pageSize);
+        if (item.page_no > page_num) {
+          item.page_no = page_num;
+        }
+        getOneDataList(item);
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消下线`,
+      });
+    });
+}
+// 添加或者编辑的确定事件
+function preserveAndPublish(item) {
+  dataList.value.forEach((key) => {
+    if (key.name === (item.name || item.ListType)) {
+      getOneDataList(key);
+    }
+  });
+}
+
+// 拖拽的初始化和处理数据
+function setupSortable(dom, index) {
+  let fromIndexNumber = null;
+  // 获取表格row的父节点
+  const sortableInstanceIs = Sortable.create(dom, {
+    sort: isDrag.value,
+    // 停靠位置样式
+    ghostClass: "sortable_ghost",
+    group: { name: "tableGroup", pull: true, put: true },
+    onStart(item) {
+      const { from } = item;
+      fromIndexNumber = parseInt(from.getAttribute("data-index"));
+    },
+    onEnd(obj) {
+      const { from, to, newIndex, oldIndex } = obj;
+      const fromIndex = parseInt(from.getAttribute("data-index"));
+      const toIndex = parseInt(to.getAttribute("data-index"));
+      if (newIndex == oldIndex && fromIndex == toIndex) return;
+      // const currRow = _.cloneDeep(dataList.value[fromIndex].tableList[oldIndex]); //拷贝数据
+      // const newList = _.cloneDeep(dataList.value[toIndex].tableList);
+      const currRow = dataList.value[fromIndex].tableList[oldIndex]; //拷贝数据
+      const newList = dataList.value[toIndex].tableList;
+      let PreviousBannerId = 0;
+      let NextBannerId = 0;
+
+      if (newIndex === 0) {
+        PreviousBannerId = 0;
+        if (newList && newList[newIndex]) NextBannerId = newList[newIndex].BannerId;
+      } else if (fromIndex != toIndex && newIndex === newList.length) {
+        PreviousBannerId = newList[newIndex - 1].BannerId;
+        NextBannerId = 0;
+      } else if (fromIndex === toIndex && newIndex === newList.length - 1) {
+        PreviousBannerId = newList[newIndex].BannerId;
+        NextBannerId = 0;
+      } else {
+        if (fromIndex === toIndex && newIndex > oldIndex) {
+          PreviousBannerId = newList[newIndex].BannerId;
+          NextBannerId = newList[newIndex + 1].BannerId;
+        } else {
+          PreviousBannerId = newList[newIndex - 1].BannerId;
+          NextBannerId = newList && newList[newIndex] ? newList[newIndex].BannerId : 0;
+        }
+      }
+
+      let params = {
+        BannerId: currRow.BannerId,
+        PreviousBannerId,
+        NextBannerId,
+        ListType: toIndex == 0 ? "A" : toIndex == 1 ? "B" : "C",
+      };
+      bannerDrag(params, currRow);
+    },
+  });
+  // // 动态控制拖拽功能
+  // this.$watch("isDrag", (newVal) => {
+  //   if (newVal) {
+  //     sortableInstanceIs.option("disabled", false); // 启用拖拽
+  //   } else {
+  //     sortableInstanceIs.option("disabled", true); // 禁用拖拽
+  //   }
+  // });
+}
+
+// 拖拽后的接口
+async function bannerDrag(params, currRow) {
+  const res = await raiInterface.bannerMoveDrag(params);
+  dataList.value = [];
+
+  if (res.Ret === 200) {
+    ElMessage.success("拖动成功!");
+    dataList.value = [
+      { name: "A", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+      { name: "B", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+      { name: "C", tableList: [], total: 0, page_no: 1, pageSize: 10 },
+    ];
+    await getDataList();
+  }
+}
+
+/* 三件套*/
+function handleRowClick(row, key) {
+  if (key === "Title") {
+    tableDetailList.value = row;
+    detailsDlgVisible.value = true;
+  }
+}
+function handleRowStyle(key, row) {
+  let obj = {
+    Title: "color: #409eff; cursor: pointer",
+    Status: key == "Status" && row.Status == 1 ? "color: #FF8A00" : "",
+  };
+  return obj[key] ? obj[key] : "";
+}
+function handleRowContent(row, key) {
+  if (key == "Status") {
+    return row[key] == 1 ? "已发布" : "已下线";
+  } else {
+    return row[key];
+  }
+}
+/* 三件套*/
+
+/* 获取表格的实例*/
+const tables = ref([]);
+const setItemRef = (el) => {
+  tables.value.push(el);
+};
+nextTick(() => {
+  tables.value.forEach((key,index) => {
+    const tbody = key.$el.querySelector("tbody");
+    setupSortable(tbody);
+    tbody.setAttribute("data-index",index);
+  });
+});
+
+
+onMounted(async () => {
+  await getDataList();
+  getSelectImgListAll()
+});
+
+setTimeout(() => {}, 1000);
+</script>
+
 <template>
   <div class="container bannar-container">
     <div class="container-top" style="margin-bottom: 20px">
@@ -7,7 +337,7 @@
     </div>
     <div class="content-box">
       <div class="content-table" :style="{ margin: item.name == 'B' ? '0 35px' : '' }" v-for="(item, index) in dataList" :key="item.name">
-        <el-table :data="item.tableList" border :ref="'table' + index" :style="isDrag && { cursor: 'move' }">
+        <el-table :data="item.tableList" border :ref="setItemRef" :style="isDrag && { cursor: 'move' }">
           <el-table-column
             v-for="column_list in bannerTableColumn"
             :key="column_list.key"
@@ -19,14 +349,14 @@
             <template #header>
               <div style="text-align: center">{{ column_list.label }}</div>
             </template>
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span @click="handleRowClick(row, column_list.key)" :style="handleRowStyle(column_list.key, row)">
                 {{ handleRowContent(row, column_list.key) }}
               </span>
             </template>
           </el-table-column>
           <el-table-column align="center" label="操作" width="125">
-            <template slot-scope="{ row }">
+            <template #default="{ row }">
               <span v-if="row.Status === 1" class="editsty" @click="handleRowButton(item, row)">下线 &nbsp;&nbsp;</span>
               <span class="editsty" @click="addHandlerBanner('编辑', row)"> 编辑</span>
             </template>
@@ -39,7 +369,7 @@
       </div>
     </div>
     <!-- 选择图片的弹框 -->
-    <el-dialog title="选择图片" :visible.sync="selectImgVisible" width="80%" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center>
+    <el-dialog title="选择图片" v-model="selectImgVisible" width="80%" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
       <div class="seleect-img-box">
         <div class="content-img" @click="clickSelectImg(item)" v-for="item in banerImgList" :key="item.ImgId">
           <img :src="item.IndexImg" alt="" class="item-img" />
@@ -54,341 +384,18 @@
     <!-- 添加或者编辑banner -->
     <add-banner-dlg
       ref="addBannerRef"
-      :addBannerVisible.sync="addBannerVisible"
-      :bannerVisibleText.sync="bannerVisibleText"
+      :addBannerVisible="addBannerVisible"
+      :bannerVisibleText="bannerVisibleText"
       :editBannerList="editBannerList"
       @showImgPop="handleshowChooseImgPop"
       @previewImg="handlePreviewImg"
       @preserveAndPublish="preserveAndPublish"
     />
     <!-- 详情的弹框 -->
-    <details-dlg :detailsDlgVisible.sync="detailsDlgVisible" :tableDetailList="tableDetailList" @previewImg="handlePreviewImg" />
+    <!-- <details-dlg :detailsDlgVisible="detailsDlgVisible" :tableDetailList="tableDetailList" @previewImg="handlePreviewImg" /> -->
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import { BannerTableColumn } from "./bannerCommon/bannerData";
-import AddBannerDlg from "./bannerCommon/addBannerDlg.vue";
-import PreviewBanner from "./bannerCommon/previewBanner.vue";
-import DetailsDlg from "./bannerCommon/detailsDlg.vue";
-import Sortable from "sortablejs";
-export default {
-  name: "",
-  computed: {
-    bannerTableColumn() {
-      return BannerTableColumn;
-    },
-    isDrag() {
-      return this.statusValue == "1" ? true : false;
-    },
-  },
-  components: {
-    mPage,
-    AddBannerDlg,
-    PreviewBanner,
-    DetailsDlg,
-    Sortable,
-  },
-  data() {
-    return {
-      dataList: [
-        { name: "A", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-        { name: "B", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-        { name: "C", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-      ],
-      statusValue: "1",
-      statusOptions: [
-        {
-          label: "已发布",
-          value: "1",
-        },
-        {
-          label: "已下线",
-          value: "0",
-        },
-      ], // 状态的筛选条件
-      tableList: [], // 列表的数据
-      selectImgVisible: false, //选择图片的弹框
-      banerImgList: [], //选择图片的数据
-      banerImgListArr: [], //选择图片的数据
-      totalImg: 0,
-      page_no_img: 1,
-      addBannerVisible: false, // 添加编辑banner的弹框
-      isShowPreview: false, // 预览的弹框
-      previewList: {}, // 预览的数据
-      detailsDlgVisible: false, //详情的弹框
-      tableDetailList: {}, //详情的数据
-      bannerVisibleText: "",
-      editBannerList: {},
-    };
-  },
-  mounted() {
-    const tables = this.$refs;
-    Object.keys(tables).forEach((key) => {
-      if (key.includes("table")) {
-        const table = tables[key][0];
-        const tbody = table.$el.querySelector("tbody");
-        const index = parseInt(key.slice(5));
-        this.setupSortable(tbody, index);
-        tbody.setAttribute("data-index", index);
-      }
-    });
-    this.getDataList();
-    this.getSelectImgListAll();
-  },
-  methods: {
-    // 获取列表数据
-    async getDataList() {
-      this.dataList.forEach(async (item, index) => {
-        const res = await raiInterface.getBannerList({
-          PageSize: item.pageSize,
-          CurrentIndex: item.page_no,
-          ListType: item.name,
-          Status: this.statusValue,
-        });
-        if (res.Ret === 200) {
-          item.tableList = res.Data.List;
-          item.total = res.Data.Paging.Totals;
-        }
-      });
-    },
-    // 获取一个的单独数据 不想写if了
-    async getOneDataList(item) {
-      const res = await raiInterface.getBannerList({
-        PageSize: item.pageSize,
-        CurrentIndex: item.page_no,
-        ListType: item.name,
-        Status: this.statusValue,
-      });
-      if (res.Ret === 200) {
-        item.tableList = res.Data.List;
-        item.total = res.Data.Paging.Totals;
-      }
-    },
-    // 获取弹框图片的数据
-    async getSelectImgList() {
-      const res = await raiInterface.getBannerImgList({
-        CurrentIndex: this.page_no_img,
-        PageSize: 10,
-      });
-      if (res.Ret === 200) {
-        this.banerImgList = res.Data.List;
-        this.totalImg = res.Data.Paging.Totals;
-      }
-    },
-    // 获取弹框图片的数据
-    async getSelectImgListAll() {
-      const res = await raiInterface.getBannerImgList({
-        CurrentIndex: 1,
-        PageSize: 100000,
-      });
-      if (res.Ret === 200) {
-        this.banerImgListArr = res.Data.List;
-        this.totalImg = res.Data.Paging.Totals;
-        this.banerImgList = _.cloneDeep(this.banerImgListArr).splice(0, 10);
-      }
-    },
-
-    // 添加banner
-    async addHandlerBanner(type, item) {
-      this.bannerVisibleText = type;
-      this.addBannerVisible = true;
-      this.editBannerList = item;
-    },
-    // banner弹框的确认事件
-    addBannerHandler() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-        }
-      });
-    },
-    // banner弹框的关闭事件
-    handleClose() {
-      this.$refs["form"].resetFields();
-      this.popData = {
-        type: "",
-        showTime: "",
-        order: "",
-        link: "",
-        imgUrl: "",
-      };
-      this.bannerVisible = false;
-    },
-    // 点击选择添加图片事件
-    handleshowChooseImgPop() {
-      this.selectImgVisible = true;
-    },
-    // 点击图片的事件
-    clickSelectImg(item) {
-      this.$refs.addBannerRef.addBannerForm.imgUrl = item.IndexImg;
-      this.$refs.addBannerRef.addBannerForm.imgId = item.ImgId;
-      this.selectImgVisible = false;
-    },
-    // 筛选框的change事件
-    handleChange() {
-      this.dataList.forEach((item) => (item.page_no = 1));
-      this.getDataList();
-    },
-    //分页
-    async handleCurrentChange(item, page) {
-      item.page_no = page;
-      this.getOneDataList(item);
-    },
-    // 选择图片的分页
-    handleCurrentChangeSelectImg(page) {
-      this.page_no_img = page;
-      this.getSelectImgList();
-    },
-    // 预览图片
-    handlePreviewImg(imgId, obj) {
-      this.banerImgListArr.forEach((item) => {
-        if (imgId === item.ImgId) {
-          this.previewList = { ...item, ...obj };
-        }
-      });
-      this.$nextTick(() => {
-        this.isShowPreview = true;
-      });
-    },
-    // table下线的操作事件
-    async handleRowButton(item, row) {
-      this.$confirm(`确定要下线此banner吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.bannerPublishAndcancel({ BannerId: row.BannerId });
-          if (res.Ret === 200) {
-            this.$message.success("下线成功！");
-            let page_num = Math.ceil((item.total - 1) / item.pageSize);
-            if (item.page_no > page_num) {
-              item.page_no = page_num;
-            }
-            this.getOneDataList(item);
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消下线`,
-          });
-        });
-    },
-    // 添加或者编辑的确定事件
-    preserveAndPublish(item) {
-      this.dataList.forEach((key) => {
-        if (key.name === (item.name || item.ListType)) {
-          this.getOneDataList(key);
-        }
-      });
-    },
-
-    // 拖拽的初始化和处理伙计
-    setupSortable(dom, index) {
-      const _this = this;
-      let fromIndexNumber = null;
-      const sortableInstanceIs = Sortable.create(dom, {
-        sort: _this.isDrag,
-        // 停靠位置样式
-        ghostClass: "sortable_ghost",
-        group: { name: "tableGroup", pull: true, put: true },
-        onStart(item) {
-          const { from } = item;
-          fromIndexNumber = parseInt(from.getAttribute("data-index"));
-        },
-        onEnd(obj) {
-          const { from, to, newIndex, oldIndex } = obj;
-          const fromIndex = parseInt(from.getAttribute("data-index"));
-          const toIndex = parseInt(to.getAttribute("data-index"));
-          if (newIndex == oldIndex && fromIndex == toIndex) return;
-          const currRow = _.cloneDeep(_this.dataList[fromIndex].tableList[oldIndex]); //拷贝数据
-          const newList = _.cloneDeep(_this.dataList[toIndex].tableList);
-
-          let PreviousBannerId = 0;
-          let NextBannerId = 0;
-
-          if (newIndex === 0) {
-            PreviousBannerId = 0;
-            if (newList && newList[newIndex]) NextBannerId = newList[newIndex].BannerId;
-          } else if (fromIndex != toIndex && newIndex === newList.length) {
-            PreviousBannerId = newList[newIndex - 1].BannerId;
-            NextBannerId = 0;
-          } else if (fromIndex === toIndex && newIndex === newList.length - 1) {
-            PreviousBannerId = newList[newIndex].BannerId;
-            NextBannerId = 0;
-          } else {
-            if (fromIndex === toIndex && newIndex > oldIndex) {
-              PreviousBannerId = newList[newIndex].BannerId;
-              NextBannerId = newList[newIndex + 1].BannerId;
-            } else {
-              PreviousBannerId = newList[newIndex - 1].BannerId;
-              NextBannerId = newList && newList[newIndex] ? newList[newIndex].BannerId : 0;
-            }
-          }
-
-          let params = {
-            BannerId: currRow.BannerId,
-            PreviousBannerId,
-            NextBannerId,
-            ListType: toIndex == 0 ? "A" : toIndex == 1 ? "B" : "C",
-          };
-          _this.bannerDrag(params, currRow);
-        },
-      });
-      // 动态控制拖拽功能
-      this.$watch("isDrag", (newVal) => {
-        if (newVal) {
-          sortableInstanceIs.option("disabled", false); // 启用拖拽
-        } else {
-          sortableInstanceIs.option("disabled", true); // 禁用拖拽
-        }
-      });
-    },
-
-    // 拖拽后的接口
-    async bannerDrag(params, currRow) {
-      const res = await raiInterface.bannerMoveDrag(params);
-      this.dataList = [];
-
-      if (res.Ret === 200) {
-        this.$message.success("拖动成功!");
-        this.dataList = [
-          { name: "A", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-          { name: "B", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-          { name: "C", tableList: [], total: 0, page_no: 1, pageSize: 10 },
-        ];
-        await this.getDataList();
-      }
-    },
-
-    /* 三件套*/
-    handleRowClick(row, key) {
-      if (key === "Title") {
-        this.tableDetailList = row;
-        this.detailsDlgVisible = true;
-      }
-    },
-    handleRowStyle(key, row) {
-      let obj = {
-        Title: "color: #409eff; cursor: pointer",
-        Status: key == "Status" && row.Status == 1 ? "color: #FF8A00" : "",
-      };
-      return obj[key] ? obj[key] : "";
-    },
-    handleRowContent(row, key) {
-      if (key == "Status") {
-        return row[key] == 1 ? "已发布" : "已下线";
-      } else {
-        return row[key];
-      }
-    },
-    /* 三件套*/
-  },
-};
-</script>
 <style>
 .sortable_ghost {
   background-color: #999 !important;

src/views/rai_manage/cygxManage/components/lableDlg.vue

@@ -1,7 +1,122 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  showRegularDlg: {
+    type: Boolean,
+    default: false,
+  },
+  dataRegular: {
+    type: Object,
+    default: {},
+  },
+});
+
+const emit = defineEmits(["showRegularDlg", "dataRegular"]);
+
+const querySearchList = ref([]);
+const addDataList = ref([]);
+
+const visibleTitle = computed(() => {
+  return props.dataRegular.TagName || "";
+});
+
+const visibleText = computed(() => {
+  let str =
+    props.dataRegular.TagType == 2
+      ? "所有【海外】的活动，和报告类型为【海外研究】的报告"
+      : props.dataRegular.TagType == 3
+      ? "所有路演回放音视频"
+      : props.dataRegular.TagType == 4
+      ? "所有问答系列音频"
+      : "";
+  return str;
+});
+watch(
+  () => props.showRegularDlg,
+  (newVal) => {
+    if (newVal) {
+      newVal && this.getInitList();
+    }
+  }
+);
+
+function handleClose() {
+  querySearchList.value = [];
+  addDataList.value = [];
+  emit("update:showRegularDlg", false);
+  emit("update:dataRegular", {});
+}
+async function addBannerHandler() {
+  let isOk = addDataList.value.every((item) => item.name !== "");
+  if (isOk) {
+    let arr = [];
+    addDataList.value.forEach((_) => {
+      arr.push(_.id);
+    });
+    const res = await raiInterface.tagHot_activityListUpdate({
+      ActivityIds: arr,
+    });
+    if (res.Ret === 200) {
+      ElMessage.success("保存成功");
+      handleClose();
+    }
+  } else {
+    ElMessage.error("活动名称不能为空");
+  }
+}
+// 删除
+function deleteChildren(index) {
+  addDataList.value.splice(index, 1);
+}
+async function querySearchAsync(query, cb) {
+  cb([]);
+  if (query) {
+    const res = await raiInterface.tagHot_activityList({ KeyWord: query });
+    if (res.Ret === 200) {
+      console.log(res);
+      querySearchList.value = res.Data.List.map((_) => {
+        return {
+          ..._,
+          value: _.ActivityName + "，" + _.ActivityTime,
+        };
+      });
+      cb(querySearchList.value);
+    }
+  }
+}
+function addActivityNameHandler() {
+  addDataList.value.push({
+    name: "",
+    id: "",
+  });
+}
+function tableSelectHandel(item) {
+  querySearchList.value.forEach((_) => {
+    if (_.value === item.name) {
+      item.id = _.ActivityId;
+    }
+  });
+}
+async function getInitList() {
+  const res = await raiInterface.tagHot_activityList();
+  if (res.Ret === 200 && res.Data.List.length > 0) {
+    res.Data.List.forEach((item) => {
+      addDataList.value.push({
+        name: item.ActivityName + "，" + item.ActivityTime,
+        id: item.ActivityId,
+      });
+    });
+  }
+}
+</script>
+
 <template>
   <div class="container lable-add-content">
-    <el-dialog :title="visibleTitle" :visible.sync="showRegularDlg" width="600px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
-      <div v-if="dataRegular.TagType == 1">
+    <el-dialog :title="visibleTitle" v-model="props.showRegularDlg" width="600px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
+      <div v-if="props.dataRegular.TagType == 1">
         <div v-for="(item, index) in addDataList" :key="index" class="add-name-item">
           <el-autocomplete style="width: 90%" v-model="item.name" clearable :fetch-suggestions="querySearchAsync" @select="tableSelectHandel(item)" placeholder="请输入内容"></el-autocomplete>
           <img style="width: 20px; height: 20px" @click="deleteChildren(index)" src="~@/assets/img/icons/delete-Item.png" />
@@ -12,138 +127,19 @@
         </div>
       </div>
       <div class="text-content" v-else>{{ visibleText }}</div>
-      <span slot="footer" class="dialog-footer">
-        <template v-if="dataRegular.TagType == 1">
-          <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="addBannerHandler">确 定</el-button>
-        </template>
-        <el-button v-else type="primary" @click="handleClose">关闭</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <template v-if="props.dataRegular.TagType == 1">
+            <el-button @click="handleClose">取 消</el-button>
+            <el-button type="primary" @click="addBannerHandler">确 定</el-button>
+          </template>
+          <el-button v-else type="primary" @click="handleClose">关闭</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {
-    showRegularDlg: {
-      type: Boolean,
-      default: false,
-    },
-    dataRegular: {
-      type: Object,
-      default: {},
-    },
-  },
-  data() {
-    return {
-      querySearchList: [],
-      addDataList: [],
-    };
-  },
-  computed: {
-    visibleTitle() {
-      return this.dataRegular.TagName || "";
-    },
-    visibleText() {
-      let str =
-        this.dataRegular.TagType == 2
-          ? "所有【海外】的活动，和报告类型为【海外研究】的报告"
-          : this.dataRegular.TagType == 3
-          ? "所有路演回放音视频"
-          : this.dataRegular.TagType == 4
-          ? "所有问答系列音频"
-          : "";
-      return str;
-    },
-  },
-  watch: {
-    showRegularDlg: {
-      handler(newVal) {
-        if (newVal) {
-          newVal && this.getInitList();
-        }
-      },
-    },
-  },
-  created() {},
-  async mounted() {},
-  methods: {
-    handleClose() {
-      this.querySearchList = [];
-      this.addDataList = [];
-      this.$emit("update:showRegularDlg", false);
-      this.$emit("update:dataRegular", {});
-    },
-    async addBannerHandler() {
-      let isOk = this.addDataList.every((item) => item.name !== "");
-      if (isOk) {
-        let arr = [];
-        this.addDataList.forEach((_) => {
-          arr.push(_.id);
-        });
-        const res = await raiInterface.tagHot_activityListUpdate({
-          ActivityIds: arr,
-        });
-        if (res.Ret === 200) {
-          this.$message.success("保存成功");
-          this.handleClose();
-        }
-      } else {
-        this.$message.error("活动名称不能为空");
-      }
-    },
-    // 删除
-    deleteChildren(index) {
-      this.addDataList.splice(index, 1);
-    },
-    async querySearchAsync(query, cb) {
-      cb([]);
-      if (query) {
-        const res = await raiInterface.tagHot_activityList({ KeyWord: query });
-        if (res.Ret === 200) {
-          console.log(res);
-          this.querySearchList = res.Data.List.map((_) => {
-            return {
-              ..._,
-              value: _.ActivityName + "，" + _.ActivityTime,
-            };
-          });
-          cb(this.querySearchList);
-        }
-      }
-    },
-    addActivityNameHandler() {
-      this.addDataList.push({
-        name: "",
-        id: "",
-      });
-    },
-    tableSelectHandel(item) {
-      this.querySearchList.forEach((_) => {
-        if (_.value === item.name) {
-          item.id = _.ActivityId;
-        }
-      });
-    },
-    async getInitList() {
-      const res = await raiInterface.tagHot_activityList();
-      if (res.Ret === 200 && res.Data.List.length > 0) {
-        res.Data.List.forEach((item) => {
-          this.addDataList.push({
-            name: item.ActivityName + "，" + item.ActivityTime,
-            id: item.ActivityId,
-          });
-        });
-      }
-    },
-  },
-};
-</script>
 <style lang="scss">
 .lable-add-content {
   .add-name-item {

src/views/rai_manage/cygxManage/industryMap.vue

@@ -1,4 +1,4 @@
-<script setup lang="jsx">
+<script setup>
 import { ref } from "vue";
 import { raiInterface } from "@/api/api.js";
 import mDialog from "../components/mapDialog.vue";

src/views/rai_manage/cygxManage/lableManage.vue

@@ -1,3 +1,287 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import Sortable from "sortablejs";
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import LableDlg from "./components/lableDlg.vue";
+import { ElMessage,ElMessageBox } from "element-plus";
+
+const labelForm = ref({
+  TagName: "",
+  ArticleTypes: "", //关联的报告系列
+  ActivityTypes: [],
+  Industries: "", //关联产业列表
+  SubjectNames: "",
+});
+const rules = ref({
+  TagName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
+});
+const dialogVisible = ref(false);
+
+const tableSelect = ref([
+  {
+    name: "当前标签数据",
+    value: 1,
+  },
+  {
+    name: "已撤下的标签",
+    value: 0,
+  },
+]);
+
+const page_no = ref(1);
+const total = ref(0);
+const pageSize = ref(10);
+const lableList = ref([]);
+const tableList = ref([]);
+// 获取表格列表
+async function getDataList() {
+  const res = await raiInterface.getLableTagList({
+    Status: tableSelectActive.value,
+    PageSize: pageSize.value,
+    CurrentIndex: page_no.value,
+    SortParam: "pv",
+    SortType: sortType.value,
+  });
+  if (res.Ret === 200) {
+    total.value = res.Data.Paging.Totals;
+    tableList.value = res.Data.List || [];
+  }
+}
+// 获取标签列表
+async function getLableTagList() {
+  const res = await raiInterface.getLableTagListCustom();
+  if (res.Ret === 200) {
+    lableList.value = res.Data || [];
+  }
+}
+
+// 获取活动类型
+async function activityType() {
+  const res = await raiInterface.getActivityType({
+    IsGetAll: true,
+  });
+  if (res.Ret === 200) {
+    optionsActivity.value = res.Data.List;
+  }
+}
+
+// 表格的切换点击事件
+function tableSelectHandel(item) {
+  if (tableSelectActive.value !== item.value) {
+    page_no.value = 1;
+    tableSelectActive.value = item.value;
+    getDataList();
+  }
+}
+// 重新上线    // 撤下标签
+function lableButtonHandel(type, item) {
+  ElMessageBox.confirm(type == "撤下" ? "确定要撤下此标签吗?" : "确定要重新上线此标签吗?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.getLableTagEnable({
+        Status: item.Status == 0 ? 1 : 0,
+        TagId: item.TagId,
+      });
+      if (res.Ret === 200) {
+        getLableTagList();
+        getDataList();
+        ElMessage({
+          type: "success",
+          message: "操作成功!",
+        });
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: "已取消",
+      });
+    });
+}
+// 分页的事件
+function handleCurrentChange(page) {
+  page_no.value = page;
+  getDataList();
+}
+
+const tableSelectActive = ref(1);
+const optionsSubject = ref([]);
+const dlgTitle = ref("添加");
+const showRegularDlg = ref(false);
+const dataRegular = ref({});
+const sortType = ref("");
+const lableSortable = ref(null);
+// 拖拽的事件
+function setupSortable() {
+  const sortableInstanceIs = Sortable.create(lableSortable.value, {
+    ghostClass: "sortable-ghost", // drop placeholder的css类名
+    sort: true,
+    onEnd(obj) {
+      const { newIndex, oldIndex } = obj;
+      // const newList = _.cloneDeep(lableList.value);
+      const newList = lableList.value;
+      let PrevTagId = 0;
+      let NextTagId = 0;
+      if (newIndex === 0) {
+        PrevTagId = 0;
+        NextTagId = newList[newIndex].TagId;
+      } else if (newIndex === newList.length - 1) {
+        PrevTagId = newList[newIndex].TagId;
+        NextTagId = 0;
+      } else {
+        if (newIndex > oldIndex) {
+          NextTagId = newList[newIndex + 1].TagId;
+          PrevTagId = newList[newIndex].TagId;
+        } else {
+          NextTagId = newList[newIndex].TagId;
+          PrevTagId = newList[newIndex - 1].TagId;
+        }
+      }
+      let params = {
+        TagId: newList[oldIndex].TagId,
+        PrevTagId,
+        NextTagId,
+      };
+      postLableTagMove(params);
+    },
+  });
+}
+// 拖拽的事件
+async function postLableTagMove(params) {
+  const res = await raiInterface.postLableTagMove(params);
+  if (res.Ret === 200) {
+    getLableTagList();
+    getDataList();
+    ElMessage.success("移动成功");
+  }
+}
+// 添加或者编辑标签
+function addOfEitdHandler(type, item) {
+  if (item && item.TagType > 0) {
+    dataRegular.value = item;
+    showRegularDlg.value = true;
+    return;
+  }
+  dlgTitle.value = type;
+  if (item) {
+    const { TagName, ArticleTypes, ActivityTypes, Industries, SubjectNames, TagId } = item;
+    labelForm.value.TagName = TagName;
+    labelForm.value.ArticleTypes = ArticleTypes ? ArticleTypes.split(",") : [];
+    labelForm.value.ActivityTypes = ActivityTypes ? ActivityTypes.split(",") : [];
+    labelForm.value.Industries = Industries ? Industries.split(",") : [];
+    labelForm.value.SubjectNames = SubjectNames ? SubjectNames.split(",") : [];
+    labelForm.value.TagId = TagId;
+  }
+  dialogVisible.value = true;
+}
+// pv uv  下载
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + `/cygx/tag/PvExport?TagId=${id}&${localStorage.getItem("auth") || ""}`;
+  return url;
+}
+// 添加标签
+function addTagHandler() {
+  ruleForm.value.validate(async (valid) => {
+    if (valid) {
+      let { ArticleTypes, ActivityTypes, Industries, SubjectNames } = labelForm.value;
+      if (!ArticleTypes.length && !ActivityTypes.length && !SubjectNames.length && !Industries.length) return ElMessage.error("请至少填写一个关联项");
+      let params = {
+        TagName: labelForm.value.TagName,
+        ArticleTypes: ArticleTypes ? ArticleTypes.join(",") : "",
+        ActivityTypes: ActivityTypes ? ActivityTypes.join(",") : "",
+        Industries: Industries ? Industries.join(",") : "",
+        SubjectNames: SubjectNames ? SubjectNames.join(",") : "",
+        TagId: dlgTitle.value == "添加" ? 0 : labelForm.value.TagId,
+      };
+      const res = await raiInterface.postLableTagSave(params);
+      if (res.Ret === 200) {
+        handleClose();
+        getLableTagList();
+        getDataList();
+        ElMessage.success("操作成功");
+      }
+    } else {
+      console.log("error submit!!");
+      return false;
+    }
+  });
+}
+
+const optionsArticle = ref([]);
+const optionsActivity = ref([]);
+const optionsIndustries = ref([]);
+// 关闭弹框
+function handleClose() {
+  optionsArticle.value = [];
+  optionsIndustries.value = [];
+  optionsSubject.value = [];
+  labelForm.value = {
+    TagName: "",
+    ArticleTypes: "", //关联的报告系列
+    ActivityTypes: [],
+    Industries: "", //关联产业列表
+    SubjectNames: "",
+  };
+  dialogVisible.value = false;
+  ruleForm.value.resetFields();
+}
+
+const ruleForm = ref(null);
+// 搜索所有的报告系列
+async function remoteMethodArticle(query) {
+  if (query !== "") {
+    const res = await raiInterface.getLableTagSubCategoryName({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      optionsArticle.value = res.Data || [];
+    }
+  } else {
+    optionsArticle.value = [];
+  }
+}
+// 产业
+async function remoteMethodIndustries(query) {
+  if (query !== "") {
+    const res = await raiInterface.getLableTagIndustrialManagement({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      optionsIndustries.value = res.Data.List || [];
+    }
+  } else {
+    optionsIndustries.value = [];
+  }
+}
+// 标的
+async function remoteMethodSubject(query) {
+  if (query !== "") {
+    const res = await raiInterface.industrialSubjectSearch({
+      KeyWord: query,
+    });
+    if (res.Ret === 200) {
+      optionsSubject.value = res.Data.List || [];
+    }
+  } else {
+    optionsSubject.value = [];
+  }
+}
+function sortChangeHandle(column) {
+  sortType.value = column.order == "descending" ? "desc" : column.order == "ascending" ? "asc" : "";
+  getDataList();
+}
+onMounted(() => {
+  setupSortable();
+  getDataList();
+  getLableTagList();
+  activityType();
+});
+</script>
+
 <template>
   <div class="container lable-manage-page">
     <el-card style="overflow: hidden">
@@ -39,7 +323,7 @@
         <el-table-column align="center" key="tiem" prop="OnlineTime" label="上线时间" width="180"></el-table-column>
         <el-table-column align="center" key="remove" prop="OfflineTime" label="撤下时间" width="180" v-if="tableSelectActive == 0"></el-table-column>
         <el-table-column align="center" key="pvuv" prop="Sort" label="pv/uv" width="90" sortable="custom">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div class="pv-uv-download">
               <span>{{ row.Pv }}/{{ row.Uv }}</span>
               <a :href="exportPvUv(row.TagId)" download>
@@ -49,7 +333,7 @@
           </template>
         </el-table-column>
         <el-table-column align="center" key="operate" label="操作" width="125" v-if="tableSelectActive == 0">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span class="editsty" @click="lableButtonHandel('上线', row)">重新上线 &nbsp;&nbsp;</span>
           </template>
         </el-table-column>
@@ -59,7 +343,7 @@
       </el-col>
     </el-card>
     <div>
-      <el-dialog :title="dlgTitle" @close="handleClose" :visible.sync="dialogVisible" width="566px" :close-on-click-modal="false" :modal-append-to-body="false">
+      <el-dialog :title="dlgTitle" @close="handleClose" v-model="dialogVisible" width="566px" :close-on-click-modal="false" :modal-append-to-body="false">
         <div>
           <el-form :model="labelForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
             <el-form-item prop="TagName">
@@ -114,303 +398,18 @@
             </el-form-item>
           </el-form>
         </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="addTagHandler">确 定</el-button>
-        </span>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="handleClose">取 消</el-button>
+            <el-button type="primary" @click="addTagHandler">确 定</el-button>
+          </span>
+        </template>
       </el-dialog>
     </div>
-    <lable-dlg :showRegularDlg.sync="showRegularDlg" :dataRegular.sync="dataRegular" />
+    <lable-dlg :showRegularDlg="showRegularDlg" :dataRegular="dataRegular" />
   </div>
 </template>
 
-<script>
-import Sortable from "sortablejs";
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-import LableDlg from "./components/lableDlg.vue";
-export default {
-  name: "",
-  components: { mPage, LableDlg },
-  props: {},
-  data() {
-    return {
-      labelForm: {
-        TagName: "",
-        ArticleTypes: "", //关联的报告系列
-        ActivityTypes: [],
-        Industries: "", //关联产业列表
-        SubjectNames: "",
-      },
-      rules: {
-        TagName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
-      },
-      dialogVisible: false,
-      page_no: 1,
-      total: 0,
-      pageSize: 10,
-      lableList: [],
-      tableList: [],
-      tableSelect: [
-        {
-          name: "当前标签数据",
-          value: 1,
-        },
-        {
-          name: "已撤下的标签",
-          value: 0,
-        },
-      ],
-      tableSelectActive: 1,
-      optionsArticle: [],
-      optionsActivity: [],
-      optionsIndustries: [],
-      optionsSubject: [],
-      dlgTitle: "添加",
-      showRegularDlg: false,
-      dataRegular: {},
-      sortType: "",
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    this.setupSortable();
-    this.getDataList();
-    this.getLableTagList();
-    this.activityType();
-  },
-  methods: {
-    // 获取表格列表
-    async getDataList() {
-      const res = await raiInterface.getLableTagList({
-        Status: this.tableSelectActive,
-        PageSize: this.pageSize,
-        CurrentIndex: this.page_no,
-        SortParam: "pv",
-        SortType: this.sortType,
-      });
-      if (res.Ret === 200) {
-        this.total = res.Data.Paging.Totals;
-        this.tableList = res.Data.List || [];
-      }
-    },
-    // 获取标签列表
-    async getLableTagList() {
-      const res = await raiInterface.getLableTagListCustom();
-      if (res.Ret === 200) {
-        this.lableList = res.Data || [];
-      }
-    },
-
-    // 获取活动类型
-    async activityType() {
-      const res = await raiInterface.getActivityType({
-        IsGetAll: true,
-      });
-      if (res.Ret === 200) {
-        this.optionsActivity = res.Data.List;
-      }
-    },
-
-    // 表格的切换点击事件
-    tableSelectHandel(item) {
-      if (this.tableSelectActive !== item.value) {
-        this.page_no = 1;
-        this.tableSelectActive = item.value;
-        this.getDataList();
-      }
-    },
-    // 重新上线    // 撤下标签
-    lableButtonHandel(type, item) {
-      this.$confirm(type == "撤下" ? "确定要撤下此标签吗?" : "确定要重新上线此标签吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.getLableTagEnable({
-            Status: item.Status == 0 ? 1 : 0,
-            TagId: item.TagId,
-          });
-          if (res.Ret === 200) {
-            this.getLableTagList();
-            this.getDataList();
-            this.$message({
-              type: "success",
-              message: "操作成功!",
-            });
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消",
-          });
-        });
-    },
-    // 分页的事件
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getDataList();
-    },
-    // 拖拽的事件
-    setupSortable() {
-      const _this = this;
-      const sortableInstanceIs = Sortable.create(this.$refs.lableSortable, {
-        ghostClass: "sortable-ghost", // drop placeholder的css类名
-        sort: true,
-        onEnd(obj) {
-          const { newIndex, oldIndex } = obj;
-          const newList = _.cloneDeep(_this.lableList);
-          let PrevTagId = 0;
-          let NextTagId = 0;
-          if (newIndex === 0) {
-            PrevTagId = 0;
-            NextTagId = newList[newIndex].TagId;
-          } else if (newIndex === newList.length - 1) {
-            PrevTagId = newList[newIndex].TagId;
-            NextTagId = 0;
-          } else {
-            if (newIndex > oldIndex) {
-              NextTagId = newList[newIndex + 1].TagId;
-              PrevTagId = newList[newIndex].TagId;
-            } else {
-              NextTagId = newList[newIndex].TagId;
-              PrevTagId = newList[newIndex - 1].TagId;
-            }
-          }
-          let params = {
-            TagId: newList[oldIndex].TagId,
-            PrevTagId,
-            NextTagId,
-          };
-          _this.postLableTagMove(params);
-        },
-      });
-    },
-    // 拖拽的事件
-    async postLableTagMove(params) {
-      const res = await raiInterface.postLableTagMove(params);
-      if (res.Ret === 200) {
-        this.getLableTagList();
-        this.getDataList();
-        this.$message.success("移动成功");
-      }
-    },
-    // 添加或者编辑标签
-    addOfEitdHandler(type, item) {
-      if (item && item.TagType > 0) {
-        this.dataRegular = item;
-        this.showRegularDlg = true;
-        return;
-      }
-      this.dlgTitle = type;
-      if (item) {
-        const { TagName, ArticleTypes, ActivityTypes, Industries, SubjectNames, TagId } = item;
-        this.labelForm.TagName = TagName;
-        this.labelForm.ArticleTypes = ArticleTypes ? ArticleTypes.split(",") : [];
-        this.labelForm.ActivityTypes = ActivityTypes ? ActivityTypes.split(",") : [];
-        this.labelForm.Industries = Industries ? Industries.split(",") : [];
-        this.labelForm.SubjectNames = SubjectNames ? SubjectNames.split(",") : [];
-        this.labelForm.TagId = TagId;
-      }
-      this.dialogVisible = true;
-    },
-    // pv uv  下载
-    exportPvUv(id) {
-      const url = process.env.API_ROOT + `/cygx/tag/PvExport?TagId=${id}&${localStorage.getItem("auth") || ""}`;
-      return url;
-    },
-    // 添加标签
-    addTagHandler() {
-      this.$refs.ruleForm.validate(async (valid) => {
-        if (valid) {
-          let { ArticleTypes, ActivityTypes, Industries, SubjectNames } = this.labelForm;
-          if (!ArticleTypes.length && !ActivityTypes.length && !SubjectNames.length && !Industries.length) return this.$message.error("请至少填写一个关联项");
-          let params = {
-            TagName: this.labelForm.TagName,
-            ArticleTypes: ArticleTypes ? ArticleTypes.join(",") : "",
-            ActivityTypes: ActivityTypes ? ActivityTypes.join(",") : "",
-            Industries: Industries ? Industries.join(",") : "",
-            SubjectNames: SubjectNames ? SubjectNames.join(",") : "",
-            TagId: this.dlgTitle == "添加" ? 0 : this.labelForm.TagId,
-          };
-          const res = await raiInterface.postLableTagSave(params);
-          if (res.Ret === 200) {
-            this.handleClose();
-            this.getLableTagList();
-            this.getDataList();
-            this.$message.success("操作成功");
-          }
-        } else {
-          console.log("error submit!!");
-          return false;
-        }
-      });
-    },
-    // 关闭弹框
-    handleClose() {
-      this.optionsArticle = [];
-      this.optionsIndustries = [];
-      this.optionsSubject = [];
-      this.labelForm = {
-        TagName: "",
-        ArticleTypes: "", //关联的报告系列
-        ActivityTypes: [],
-        Industries: "", //关联产业列表
-        SubjectNames: "",
-      };
-      this.dialogVisible = false;
-      this.$refs.ruleForm.resetFields();
-    },
-    // 搜索所有的报告系列
-    async remoteMethodArticle(query) {
-      if (query !== "") {
-        const res = await raiInterface.getLableTagSubCategoryName({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.optionsArticle = res.Data || [];
-        }
-      } else {
-        this.optionsArticle = [];
-      }
-    },
-    // 产业
-    async remoteMethodIndustries(query) {
-      if (query !== "") {
-        const res = await raiInterface.getLableTagIndustrialManagement({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.optionsIndustries = res.Data.List || [];
-        }
-      } else {
-        this.optionsIndustries = [];
-      }
-    },
-    // 标的
-    async remoteMethodSubject(query) {
-      if (query !== "") {
-        const res = await raiInterface.industrialSubjectSearch({
-          KeyWord: query,
-        });
-        if (res.Ret === 200) {
-          this.optionsSubject = res.Data.List || [];
-        }
-      } else {
-        this.optionsSubject = [];
-      }
-    },
-    sortChangeHandle(column) {
-      this.sortType = column.order == "descending" ? "desc" : column.order == "ascending" ? "asc" : "";
-      this.getDataList();
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .lable-manage-page {
   .top-comtent {

src/views/rai_manage/cygxManage/searchManage.vue

@@ -1,3 +1,39 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { raiInterface } from "@/api/api.js";
+
+const PageSize = ref(12);
+const CurrentIndex = ref(1);
+const searchList = ref([]);
+const total = ref(0);
+
+const exportUser = computed(() => {
+  return import.meta.env.VITE_APP_API_ROOT + "/cygx/hostKeyword/download?" + localStorage.getItem("auth") || "";
+});
+
+const applyList = () => {
+  raiInterface
+    .hostKeyword({
+      PageSize: PageSize.value,
+      CurrentIndex: CurrentIndex.value,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        total.value = res.Data.Paging.Totals;
+        searchList.value = res.Data.List;
+      }
+    });
+};
+const handleCurrentChange = (val) => {
+  CurrentIndex.value = val;
+  applyList();
+};
+
+onMounted(() => {
+  applyList();
+});
+</script>
+
 <template>
   <div class="container-search">
     <el-card>
@@ -12,71 +48,15 @@
     </el-card>
     <el-card style="margin-top: 20px">
       <el-table style="width: 100%" border :data="searchList">
-        <el-table-column label="排序" align="center" width="84" prop="Sort">
-        </el-table-column>
-        <el-table-column align="center" label="关键词"  prop="KeyWord"> </el-table-column>
-        <el-table-column align="center" label="搜索次数"  prop="KeyWordNum"> </el-table-column>
+        <el-table-column label="排序" align="center" width="84" prop="Sort"> </el-table-column>
+        <el-table-column align="center" label="关键词" prop="KeyWord"> </el-table-column>
+        <el-table-column align="center" label="搜索次数" prop="KeyWordNum"> </el-table-column>
       </el-table>
-      <el-pagination
-        @current-change="handleCurrentChange"
-        background
-        layout="pager"
-        :page-size="12"
-        :total="total"
-      >
-      </el-pagination>
+      <el-pagination @current-change="handleCurrentChange" background layout="pager" :page-size="12" :total="total"> </el-pagination>
     </el-card>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    return {
-      PageSize: 12,
-      CurrentIndex: 1,
-      searchList: [],
-      total:0
-    };
-  },
-  computed: {
-    // 导出地址
-    exportUser() {
-      return (
-        process.env.API_ROOT + "/cygx/hostKeyword/download?"+localStorage.getItem('auth')||''
-      );
-    },
-  },
-  watch: {},
-  created() {
-    
-  },
-  mounted() {
-    this.applyList()
-  },
-  methods: {
-     applyList() {
-      raiInterface.hostKeyword({
-        PageSize:this.PageSize,
-        CurrentIndex:this.CurrentIndex,
-      }).then((res=>{
-        if(res.Ret === 200){
-          this.total=res.Data.Paging.Totals
-          this.searchList=res.Data.List
-        }       
-      }))
-    },
-     handleCurrentChange(val) {
-       this.CurrentIndex=val;
-       this.applyList()
-    }
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-search {
   .search-top {
@@ -93,8 +73,9 @@ export default {
     }
   }
   .el-pagination {
+    display: flex;
+    justify-content: flex-end;
     margin-top: 20px;
-    text-align: right;
   }
 }
 </style>

src/views/rai_manage/reportManage/appletsReport.vue

@@ -113,7 +113,7 @@
     </el-card>
     <!-- 弹框部分 -->
     <el-dialog
-      v-dialogDrag
+      draggable
       :modal-append-to-body="false"
       :center="true"
       :close-on-press-escape="true"
@@ -218,7 +218,7 @@ export default {
       modificationValue: "",
       modificationId: "",
       modificationOptions: [],
-      exportUser: process.env.API_ROOT + "/cygx/reportArticle/export?ReportId=",
+      exportUser: import.meta.env.VITE_APP_API_ROOT + "/cygx/reportArticle/export?ReportId=",
       auto: localStorage.getItem("auth") || "",
       tabsList: [
         { name: "已归类报告", query: "已归类", index: 1 },
@@ -245,7 +245,7 @@ export default {
       return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
     },
     exportPvUv() {
-      return process.env.API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
     },
   },
   created() {},

src/views/rai_manage/reportManage/components/addHaveReport.vue

@@ -46,7 +46,7 @@
         </div>
       </el-card>
     </el-form>
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="新建报告类型" :visible.sync="addMatchTypeDlg" :before-close="confirmMatchType" width="500px">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="新建报告类型" :visible.sync="addMatchTypeDlg" :before-close="confirmMatchType" width="500px">
       <p style="margin-bottom: 10px">所属行业：{{ dlgTextRender }}</p>
       <el-form :model="addMatchTypeData" :rules="matchTypeRules" ref="addMatchTypeData">
         <el-form-item prop="type">

src/views/rai_manage/reportManage/components/appIndustry.vue

@@ -137,7 +137,7 @@
       </span>
     </el-dialog>
     <!-- //查询标的 -->
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
       <div>
         <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
           <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
@@ -150,7 +150,7 @@
       <p style="padding-bottom: 50px"></p>
     </el-dialog>
     <!-- //移动至弘则覆盖 -->
-    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="移至弘则覆盖" :visible.sync="dialogCoverHz" width="500px" :before-close="handleCloseCoverHz">
+    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="移至弘则覆盖" :visible.sync="dialogCoverHz" width="500px" :before-close="handleCloseCoverHz">
       <el-select placeholder="请选择行业" clearable v-model="industryCover" style="width: 100%; margin-bottom: 20px">
         <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
       </el-select>
@@ -214,7 +214,7 @@ export default {
   computed: {
     // 导出地址
     exportUser() {
-      return process.env.API_ROOT + "/cygx/industrialManagement/export?" + localStorage.getItem("auth") || "";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/industrialManagement/export?" + localStorage.getItem("auth") || "";
     },
   },
   watch: {},

src/views/rai_manage/reportManage/components/collectFansDlg.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- 选择图片的弹框 -->
-    <el-dialog :title="collectFansDlgText" :visible.sync="iscollectFansDlgShow" width="50%" :before-close="handleClose" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center>
+    <el-dialog :title="collectFansDlgText" :visible.sync="iscollectFansDlgShow" width="50%" :before-close="handleClose" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
       <div>
         <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border>
           <el-table-column prop="RealName" align="center" label="姓名"></el-table-column>

src/views/rai_manage/reportManage/components/roadshowApplyDlg.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- 选择图片的弹框 -->
-    <el-dialog title="路演申请" :visible.sync="isRadshowApplyShow" width="50%" :before-close="handleClose" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center>
+    <el-dialog title="路演申请" :visible.sync="isRadshowApplyShow" width="50%" :before-close="handleClose" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
       <div>
         <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border>
           <el-table-column prop="SubjectName" align="center" label="申请标的"></el-table-column>

src/views/rai_manage/reportManage/components/specialDlg.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container special-dlg-container">
-    <el-dialog title="新建专栏作者" :visible.sync="addAuthorDlgVisible" width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
+    <el-dialog title="新建专栏作者" :visible.sync="addAuthorDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
       <el-autocomplete
         class="inline-input"
         style="width: 100%; margin-bottom: 20px"
@@ -17,7 +17,7 @@
         <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="驳回" :visible.sync="submitRejectDlgVisible" width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
+    <el-dialog title="驳回" :visible.sync="submitRejectDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
       <el-input type="textarea" :rows="4" style="margin-bottom: 20px" v-model.trim="textReject" placeholder="请输入驳回原因"></el-input>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleCloseReject">取 消</el-button>

src/views/rai_manage/reportManage/internalTesting.vue

@@ -179,7 +179,7 @@ export default {
     },
     //导出pv uv
     exportPvUv(id) {
-      const url = process.env.API_ROOT + "/cygx/productInterior/PvExport?ProductInteriorId=" + id + "&" + localStorage.getItem("auth") || "";
+      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/productInterior/PvExport?ProductInteriorId=" + id + "&" + localStorage.getItem("auth") || "";
       return url;
     },
     // 可见范围

src/views/rai_manage/reportManage/morningMeetingManage.vue

@@ -200,7 +200,7 @@ export default {
       this.getListData();
     },
     exportPvUv(row) {
-      return process.env.API_ROOT + "/cygx/morningMeeting/list_pv?MeetingId=" + row.Id + "&" + localStorage.getItem("auth") + `&IsExport=${true}`;
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/morningMeeting/list_pv?MeetingId=" + row.Id + "&" + localStorage.getItem("auth") + `&IsExport=${true}`;
     },
   },
   computed: {},

src/views/rai_manage/reportManage/reportChoiceness.vue

@@ -134,7 +134,7 @@ export default {
     },
     //导出pv uv
     exportPvUv(id) {
-      const url = process.env.API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=1&" + localStorage.getItem("auth") || "";
+      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=1&" + localStorage.getItem("auth") || "";
       return url;
     },
     //选择后的事件

src/views/rai_manage/reportManage/roadshowEssence.vue

@@ -204,7 +204,7 @@ export default {
     },
     //导出pv uv
     exportPvUv(id) {
-      const url = process.env.API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=2&" + localStorage.getItem("auth") || "";
+      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=2&" + localStorage.getItem("auth") || "";
       return url;
     },
   },

src/views/rai_manage/reportManage/summaryManage.vue

@@ -153,7 +153,7 @@ export default {
       return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
     },
     exportPvUv() {
-      return process.env.API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
+      return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
     },
   },
 

src/views/rai_manage/reportManage/tacticsTimeLine.vue

@@ -61,7 +61,7 @@
     <el-dialog
       :visible.sync="addOfEditDialog"
       :title="addOfEditText"
-      v-dialogDrag
+      draggable
       :close-on-click-modal="false"
       :modal-append-to-body="false"
       center
@@ -216,7 +216,7 @@ export default {
     },
     // 导出pv uv
     exportPvUv(item) {
-      const url = process.env.API_ROOT + "/cygx/tacticsTimeLine/PvExport?TimeLineId=" + item.TimeLineId + "&" + localStorage.getItem("auth") || "";
+      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/tacticsTimeLine/PvExport?TimeLineId=" + item.TimeLineId + "&" + localStorage.getItem("auth") || "";
       return url;
     },
     // 删除

src/views/rai_manage/reportManage/theLastWeek.vue

@@ -123,7 +123,7 @@ export default {
     //导出pv uv
     exportPvUv(id) {
       const url =
-        process.env.API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=4&" + localStorage.getItem("auth") || "";
+        import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=4&" + localStorage.getItem("auth") || "";
       return url;
     },
     //选择后的事件

src/views/rai_manage/reportManage/thisWeek.vue

@@ -126,7 +126,7 @@ export default {
     //导出pv uv
     exportPvUv(id) {
       const url =
-        process.env.API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=3&" + localStorage.getItem("auth") || "";
+        import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=3&" + localStorage.getItem("auth") || "";
       return url;
     },
     //选择后的事件

src/views/rai_manage/reportManage/yanXuanSpecial.vue

@@ -273,7 +273,7 @@ export default {
     },
     // 下载pv/uv 地址
     exportPvUv(id) {
-      const url = process.env.API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
+      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
       return url;
     },
     // 分页