行程线路

src/api/manage/route/index.ts

@@ -72,3 +72,15 @@ export const getRegionTree = (query?: RouteForm) => {
     params: query
   });
 };
+
+/**
+ * 住宿下拉列表
+ * @param query
+ */
+export const hotelall = (query?: RouteForm) => {
+  return request({
+    url: '/manage/hotel/all',
+    method: 'get',
+    params: query
+  });
+};

src/views/manage/routeManage/index.vue

@@ -6,7 +6,7 @@
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
             <el-form-item label="行程路线" prop="">
-              <el-input class="inputWidth" placeholder="请输入行程路线" clearable @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.title" class="inputWidth" placeholder="请输入行程路线" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="发布状态" prop="">
               <el-select v-model="queryParams.status" class="inputWidth" placeholder="请选择发布状态" clearable>
@@ -17,12 +17,6 @@
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               <el-button v-hasPermi="['system:Route:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-              <el-button v-hasPermi="['system:Route:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-                >修改</el-button
-              >
-              <el-button v-hasPermi="['system:Route:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-                >删除</el-button
-              >
             </el-form-item>
           </el-form>
         </el-card>
@@ -33,16 +27,46 @@
       <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="线路标题" align="center" prop="title" />
       <el-table-column label="线路封面" align="center" prop="" />
-      <el-table-column label="线路标签" align="center" prop="tagId" />
+      <el-table-column label="线路标签" align="center" prop="tagId">
-      <el-table-column label="行程天数" align="center" prop="routeDays" />
+        <template #default="scope">
-      <el-table-column label="行程里数" align="center" prop="routeMileage" />
+          <span>{{ formatTag(scope.row.tagId) }}</span>
-      <el-table-column label="行驶时长" align="center" prop="routeDriveHour" />
+        </template>
-      <el-table-column label="最佳时间" align="center" prop="appropriateTime" />
+      </el-table-column>
-      <el-table-column label="行程" align="center" prop="" />
+      <el-table-column label="行程天数" align="center" prop="routeDays">
+        <template #default="scope">
+          <div>{{ scope.row.routeDays }}天</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="行程里数" align="center" prop="routeMileage">
+        <template #default="scope">
+          <div>{{ scope.row.routeMileage }}公里</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="行驶时长" align="center" prop="routeDriveHour">
+        <template #default="scope">
+          <div>{{ scope.row.routeDriveHour }}小时</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="最佳时间" align="center" prop="appropriateTime">
+        <template #default="scope">
+          <div>{{ scope.row.appropriateTime }}月</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="行程" align="center" prop="">
+        <template #default="scope">
+          <el-button link type="primary" @click="linkontent(scope.row)">查看详情</el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="加入行程数" align="center" prop="joinRouteCount" />
       <el-table-column label="喜欢数" align="center" prop="routeAgreeCount" />
       <el-table-column label="线路评论数" align="center" prop="routeCommentCount" />
-      <el-table-column label="发布状态" align="center" prop="status" />
+      <el-table-column label="发布状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status == 0" type="info">未发布</el-tag>
+          <el-tag v-if="scope.row.status == 1" type="success">审核中</el-tag>
+          <el-tag v-if="scope.row.status == 2" type="primary">已发布</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-tooltip content="编辑" placement="top">
@@ -66,7 +90,7 @@
     <!-- 添加或修改景点、租赁管理对话框 -->
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="60%" append-to-body>
       <el-form ref="RouteFormRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="路线标题" prop="title">
+        <el-form-item label="线路标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入路线标题" style="width: 400px" />
         </el-form-item>
         <!--        <el-form-item label="路线封面" prop="attribute">-->
@@ -103,26 +127,33 @@
         <div v-for="(item, index) in bookrouteDetailsList" :key="item.id">
           <div class="routeDetailsListitem">
             <div style="display: flex; justify-content: space-between">
-              <div class="title">DIY{{ index + 1 }}·{{ item.title }}</div>
+              <div class="title">DAY{{ index + 1 }}·{{ item.title }}</div>
               <div>
-                <el-button :loading="buttonLoading" type="text" @click="editlistitem(item)">编 辑</el-button>
+                <el-button :loading="buttonLoading" type="text" @click="editlistitem(item, index)">编 辑</el-button>
                 <el-button type="text" @click="dellistitem(index)">删 除</el-button>
               </div>
             </div>
             <div>{{ item.description }}</div>
-            <div>景点</div>
+            <div style="font-weight: 600">景点 {{ item.articleName }}</div>
             <div>建议游玩{{ item.routeHours }}小时 | {{ item.address }}</div>
             <div>{{ item.recommend }}</div>
             <div>{{ item.addressDes }}</div>
             <div>{{ item.guide }}</div>
+            <div class="hotellistcalss">
+              <div v-for="rr in item.hotelVoList" class="hotelitem">
+                <div class="title">{{ rr.name }}</div>
+                <div class="address">{{ rr.address }}</div>
+                <div class="address">{{ rr.number }}</div>
+              </div>
+            </div>
           </div>
         </div>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">预 览</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="yulanform">预 览</el-button>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">存 草 稿</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm('0')">存 草 稿</el-button>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提 交</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm('1')">提 交</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -137,7 +168,7 @@
           <el-input v-model="routeDetailsList.description" placeholder="请输入描述" style="width: 500px" autosize type="textarea" />
         </el-form-item>
         <el-form-item label="添加地点">
-          <el-select v-model="value" placeholder="请选择标记地点" size="large" style="width: 500px">
+          <el-select v-model="routeDetailsList.articleId" placeholder="请选择标记地点" size="large" style="width: 500px">
             <el-option v-for="item in sys_user_contentOptions" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
@@ -154,15 +185,60 @@
           <el-input v-model="routeDetailsList.guide" placeholder="请输入避坑指南" style="width: 500px" autosize type="textarea" />
         </el-form-item>
         <el-form-item label="添加住宿攻略">
-          <el-select v-model="value" placeholder="请选择住宿攻略" size="large" style="width: 500px">
+          <el-select v-model="hotelallvalue" placeholder="请选择住宿攻略" size="large" style="width: 500px" multiple>
-            <el-option v-for="item in sys_user_contentOptions" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option v-for="item in sys_user_hotelall" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button :loading="buttonLoading" type="primary" @click="savereginer">提 交</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button @click="savecancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!--    预览-->
+    <el-dialog v-model="yulandialog.visible" :title="yulandialog.title" width="60%" append-to-body>
+      <el-form ref="RouteFormRef" :model="form" :rules="rules" label-width="120px">
+        <div>{{ form.title }}</div>
+        <!--        <el-form-item label="路线封面" prop="attribute">-->
+        <div>{{ formatTag(tagvalue) }}</div>
+        <div>{{ addressdata(form.region) }}</div>
+        <!--        <el-form-item label="涉及的行政区域" prop="treevalue">-->
+        <!--          <el-cascader v-model="treevalue" :options="regiontree" :props="props" clearable placeholder="请选择涉及的行政区域" style="width: 400px" />-->
+        <!--        </el-form-item>-->
+        <div style="display: flex">
+          <div>行程天数:{{ form.routeDays }}天</div>
+          <div>行程里数:{{ form.routeMileage }}公里</div>
+          <div>行驶时长:{{ form.routeDriveHour }}小时</div>
+          <div>最佳时间:{{ form.appropriateTime }}月</div>
+        </div>
+        <div>行程：</div>
+        <!--        展示数据-->
+        <div v-for="(item, index) in bookrouteDetailsList" :key="item.id">
+          <div class="routeDetailsListitem">
+            <div style="display: flex; justify-content: space-between">
+              <div class="title">DAY{{ index + 1 }}·{{ item.title }}</div>
+            </div>
+            <div>{{ item.description }}</div>
+            <div style="font-weight: 600">景点 {{ item.articleName }}</div>
+            <div>建议游玩{{ item.routeHours }}小时 | {{ item.address }}</div>
+            <div>{{ item.recommend }}</div>
+            <div>{{ item.addressDes }}</div>
+            <div>{{ item.guide }}</div>
+            <div class="hotellistcalss">
+              <div v-for="rr in item.hotelVoList" class="hotelitem">
+                <div class="title">{{ rr.name }}</div>
+                <div class="address">{{ rr.address }}</div>
+                <div class="address">{{ rr.number }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="yulanquxiao">取 消</el-button>
         </div>
       </template>
     </el-dialog>
@@ -170,7 +246,7 @@
 </template>
 
 <script setup name="Route" lang="ts">
-import { listRoute, getRoute, delRoute, addRoute, updateRoute, getRegionTree } from '@/api/manage/route';
+import { listRoute, getRoute, delRoute, addRoute, updateRoute, getRegionTree, hotelall } from '@/api/manage/route';
 import { RouteVO, RouteQuery, RouteForm } from '@/api/manage/route/types';
 import { Plus } from '@element-plus/icons-vue';
 import { contentall, tagall } from '@/api/manage/notebook';
@@ -187,13 +263,16 @@ const multiple = ref(true);
 const total = ref(0);
 const sys_user_tagOptions = ref([]); //标签库
 const sys_user_contentOptions = ref([]); //地点
+const sys_user_hotelall = ref([]); //地点
 const value = ref('');
 const tagvalue = ref('');
 const treevalue = ref('');
+const hotelallvalue = ref('');
 
 const note_publish_list = ref([
-  { label: '已发布', value: 1 },
+  { label: '已发布', value: 2 },
-  { label: '未发布', value: 2 }
+  { label: '审核中', value: 1 },
+  { label: '未发布', value: 0 }
 ]);
 const regiontree = ref([]);
 const props = { multiple: true, value: 'id' };
@@ -208,6 +287,10 @@ const addressdialog = reactive<DialogOption>({
   visible: false,
   title: ''
 });
+const yulandialog = reactive<DialogOption>({
+  visible: false,
+  title: '预览'
+});
 const initFormData: RouteForm = {
   id: undefined,
   type: undefined,
@@ -233,11 +316,10 @@ const data = reactive<PageData<RouteForm, RouteQuery>>({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    type: undefined,
+    title: undefined,
-    secondType: undefined,
+    status: undefined,
     isOpen: undefined,
     attribute: undefined,
-    status: undefined,
     province: undefined,
     city: undefined,
     memberLevel: undefined,
@@ -263,13 +345,13 @@ const data = reactive<PageData<RouteForm, RouteQuery>>({
     remark: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
     memberLevel: [{ required: true, message: '会员等级不能为空', trigger: 'blur' }],
     tagId: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
-    recommend: [{ required: true, message: '推荐语不能为空', trigger: 'blur' }],
+    appropriateTime: [{ required: true, message: '最佳时间', trigger: 'blur' }],
-    intro: [{ required: true, message: '介绍不能为空', trigger: 'blur' }],
+    routeDriveHour: [{ required: true, message: '行驶时长', trigger: 'blur' }],
-    address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
+    routeMileage: [{ required: true, message: '行程里数', trigger: 'blur' }],
-    longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
+    routeDays: [{ required: true, message: '行程天数', trigger: 'blur' }],
-    latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
+    treevalue: [{ required: true, message: '涉及的行政区', trigger: 'blur' }],
-    orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+    tagvalue: [{ required: true, message: '路线标签', trigger: 'blur' }],
-    level: [{ required: true, message: '景区等级不能为空', trigger: 'blur' }]
+    title: [{ required: true, message: '线路标题', trigger: 'blur' }]
   }
 });
 
@@ -312,6 +394,7 @@ onMounted(() => {
   getRegionTreelist();
   getContent();
   getTag();
+  gethotelall();
   nextTick(() => {
     autoTableHeight.value = proxy?.autoTableHeight();
   });
@@ -349,6 +432,9 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
+  queryParams.value.title = '';
+  queryParams.value.status = '';
+
   handleQuery();
 };
 
@@ -368,7 +454,19 @@ const handleAdd = () => {
   tagvalue.value = [];
   treevalue.value = [];
 };
-
+/**
+ * 标签格式化
+ */
+const formatTag = (tagId: string | null) => {
+  let tagString = '';
+  for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
+    const element = sys_user_tagOptions.value[i];
+    if (tagId?.includes(element.id)) {
+      tagString += ',' + element.title;
+    }
+  }
+  return tagString.substring(1);
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row?: RouteVO) => {
   reset();
@@ -382,18 +480,28 @@ const handleUpdate = async (row?: RouteVO) => {
   const arr = form.value.region.split(',');
   // 使用循环将数组中的元素转换为整数
   const result = [];
+  console.log(arr.length);
+  if (arr.length > 1) {
     for (let i = 0; i < arr.length; i += 2) {
       result.push([parseInt(arr[i]), parseInt(arr[i + 1])]);
     }
     treevalue.value = result;
-
+  } else {
+    treevalue.value = form.value.region.split(',').map(Number);
+  }
+  console.log(result, arr);
   dialog.title = '修改路线';
 };
 
 /** 提交按钮 */
-const submitForm = () => {
+const submitForm = (type) => {
   form.value.tagId = tagvalue.value.join(',');
+  console.log(treevalue.value, '22222');
   form.value.region = treevalue.value.join(',');
+  form.value.status = Number(type);
+  form.value.routeDetailsList = bookrouteDetailsList.value;
+  console.log(form.value, bookrouteDetailsList.value);
+  // return
   RouteFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       buttonLoading.value = true;
@@ -443,26 +551,122 @@ const getTag = async () => {
   const res = await tagall();
   sys_user_tagOptions.value = res; //标签库
 };
+const gethotelall = async () => {
+  const res = await hotelall();
+  sys_user_hotelall.value = res;
+};
+
 //添加行程
 const add = () => {
-  routeDetailsList.value = [];
+  routeDetailsList.value = {};
   addressdialog.visible = true;
+  addressdialog.title = `添加DAY${bookrouteDetailsList.value.length + 1}行程`;
 };
 //编辑单个行程
-const editlistitem = (item) => {
+const editlistitem = (item, index) => {
   routeDetailsList.value = item;
   addressdialog.visible = true;
+  addressdialog.title = `编辑DAY${index + 1}行程`;
+  console.log(item);
+  let arr = item.hotelVoList;
+  const extractedIds = arr.map((item) => item.id);
+
+  hotelallvalue.value = extractedIds;
 };
 //删除单个行程
 const dellistitem = (index) => {};
+const savecancel = () => {
+  addressdialog.visible = false;
+};
+//预览
+const yulanform = () => {
+  addressdata(form.value.region);
+  yulandialog.visible = true;
+};
+//取消预览
+const yulanquxiao = () => {
+  yulandialog.visible = false;
+};
+//查看详情
+const linkontent = async (row?: RouteVO) => {
+  // reset();
+  // tagvalue.value=[]
+  const _id = row?.id || ids.value[0];
+  const res = await getRoute(_id);
+  Object.assign(form.value, res.data);
+  yulandialog.visible = true;
+  bookrouteDetailsList.value = form.value.routeDetailsList;
+  tagvalue.value = form.value.tagId.split(',').map(Number);
+  const arr = form.value.region.split(',');
+  // 使用循环将数组中的元素转换为整数
+  const result = [];
+  console.log(arr.length);
+  if (arr.length > 1) {
+    for (let i = 0; i < arr.length; i += 2) {
+      result.push([parseInt(arr[i]), parseInt(arr[i + 1])]);
+    }
+    treevalue.value = result;
+  } else {
+    treevalue.value = form.value.region.split(',').map(Number);
+  }
+  console.log(result, arr);
+};
+
+//新增编辑行程
 const savereginer = () => {
   if (routeDetailsList.value.id == undefined) {
     console.log('新增');
-    form.value.routeDetailsList.push(routeDetailsList.value);
+    addressdialog.visible = false;
+    routeDetailsList.value.hotelIds = hotelallvalue.value.join(',');
+    routeDetailsList.value.hotelVoList = hoteldata(hotelallvalue.value);
+    // form.value.routeDetailsList.push(routeDetailsList.value);
     bookrouteDetailsList.value.push(routeDetailsList.value);
   } else {
     console.log('修改');
+    routeDetailsList.value.hotelIds = hotelallvalue.value.join(',');
+    routeDetailsList.value.hotelVoList = hoteldata(hotelallvalue.value);
+    const index = bookrouteDetailsList.value.findIndex((item) => item.id === routeDetailsList.value.id);
+    if (index !== -1) {
+      bookrouteDetailsList.value.splice(index, 1, routeDetailsList.value);
     }
+    addressdialog.visible = false;
+  }
+};
+//住宿信息
+const hoteldata = (ids: string | null) => {
+  let hotelarray = [];
+  for (let i = 0; i < sys_user_hotelall.value.length; i++) {
+    const item = sys_user_hotelall.value[i];
+    if (ids?.includes(item.id)) {
+      hotelarray.push(item);
+    }
+  }
+  return hotelarray;
+};
+//行政区
+const addressdata = (ids: string | null) => {
+  let addressarray = '';
+  for (let i = 0; i < regiontree.value.length; i++) {
+    const item = regiontree.value[i];
+    if (ids?.includes(item.id)) {
+      // addressarray.push(item);
+      addressarray += ',' + item.label;
+      if (item.children) {
+        for (let j = 0; j < item.children.length; j++) {
+          const arr = item.children[j];
+          console.log(arr, 'arr');
+
+          if (ids?.includes(arr.id)) {
+            // addressarray.push(arr);
+            console.log(arr, 'arr');
+            addressarray += '-' + arr.label;
+          }
+        }
+      }
+    }
+  }
+  console.log(addressarray, 'qqqq');
+  return addressarray;
 };
 </script>
 <style lang="scss" scoped>
@@ -481,9 +685,31 @@ const savereginer = () => {
   border-radius: 20px;
   background-color: #f2f2f2;
   padding: 20px;
+  line-height: 22px;
   .title {
     font-weight: 600;
     font-size: 16px;
   }
 }
+.hotellistcalss {
+  display: flex;
+  margin-top: 20px;
+  .hotelitem {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    line-height: 25px;
+    margin-right: 20px;
+    width: 30%;
+    .title {
+      font-weight: 600;
+      font-size: 14px;
+      color: #000;
+    }
+    .address {
+      font-size: 12px;
+      color: #4a5663;
+    }
+  }
+}
 </style>

vite.config.ts

@@ -25,8 +25,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          // target: 'http://192.168.18.23:8080',
+          target: 'http://192.168.18.23:8080', //维嘉
-          target: 'http://192.168.18.113:8080',
+          // target: 'http://192.168.18.113:8080',//华伟
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')