From d3ed5a88be9d973154b07395a67e4afc190ba8bb Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Tue, 14 Jan 2025 09:21:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=AA=E6=8A=A4=E4=BA=A7=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/accompany/accompany.js                |  59 +++
 src/views/Accompany/Accompany.vue             | 476 ++++++++++++++++++
 .../Accompany/components/AddAccompany.vue     | 302 +++++++++++
 .../Accompany/components/ShowAccompany.vue    | 140 ++++++
 4 files changed, 977 insertions(+)
 create mode 100644 src/api/accompany/accompany.js
 create mode 100644 src/views/Accompany/Accompany.vue
 create mode 100644 src/views/Accompany/components/AddAccompany.vue
 create mode 100644 src/views/Accompany/components/ShowAccompany.vue

diff --git a/src/api/accompany/accompany.js b/src/api/accompany/accompany.js
new file mode 100644
index 0000000..67b0421
--- /dev/null
+++ b/src/api/accompany/accompany.js
@@ -0,0 +1,59 @@
+import request from '@/utils/request'
+
+function customParamsSerializer(params) {
+  let result = '';
+  for (let key in params) {
+    if (params.hasOwnProperty(key)) {
+      if (Array.isArray(params[key])) {
+        params[key].forEach((item, index) => {
+          if (item.key) {
+            result +=
+              `${key}[${index}][key]=${item.key}&${key}[${index}][op]=${item.op}&${key}[${index}][value]=${item.value}&`;
+
+          } else {
+            result += `${key}[${index}]=${item}&`
+          }
+        });
+      } else {
+        result += `${key}=${params[key]}&`;
+      }
+    }
+  }
+  return result.slice(0, -1);
+}
+export function index(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/accompany-product/index',
+    params,
+    paramsSerializer: customParamsSerializer,
+    isLoading
+  })
+}
+
+export function show(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/accompany-product/show',
+    params,
+    isLoading
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/admin/accompany-product/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/admin/accompany-product/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/views/Accompany/Accompany.vue b/src/views/Accompany/Accompany.vue
new file mode 100644
index 0000000..4af342f
--- /dev/null
+++ b/src/views/Accompany/Accompany.vue
@@ -0,0 +1,476 @@
+<template>
+  <div>
+    <el-card shadow="never" style="margin-top: 20px;">
+      <template #header>
+        <slot name="header">
+          <vxe-toolbar ref="toolbar" :export="isHasAuth('export')" :print="isHasAuth('print')" custom>
+            <template #buttons>
+              <el-button v-if="isHasAuth('create')" icon="el-icon-plus" type="primary" size="small"
+                @click="isShowAdd = true,$refs.AddAccompany.setType(select.type)">新增</el-button>
+              <el-button v-if="isHasAuth('search')" icon="el-icon-search" type="primary" plain size="small"
+                @click="getList">搜索</el-button>
+            </template>
+          </vxe-toolbar>
+        </slot>
+      </template>
+
+      <vxe-table ref="table" stripe style="margin-top: 10px" :loading="loading" :height="tableHeight" keep-source
+        show-overflow :menu-config="{
+          className: 'my-menus',
+          body: {
+            options: [
+              [
+                { code: 'copy', name: '复制', prefixConfig: { icon: 'vxe-icon-copy' }, suffixConfig: { content: 'Ctrl+C' } },
+                { code: 'remove', name: '删除', prefixConfig: { icon: 'vxe-icon-delete-fill', className: 'color-red' } }
+              ],
+            ]
+          }
+        }" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :export-config="{}"
+        :edit-rules="validRules" :edit-config="{
+          trigger: 'manual',
+          mode: 'row',
+          showStatus: true,
+          isHover: true,
+          autoClear: false,
+        }" :align="allAlign" :data="tableData" @menu-click="contextMenuClickEvent">
+        <vxe-column type="seq" width="58" align="center" />
+
+        <vxe-column header-align="center" field="name" width="160" title="产品名称"
+          :edit-render="{ name: 'input', attrs: { type: 'text' } }" />
+        <vxe-column header-align="center" field="price" width="160" title="价格"
+          :edit-render="{ name: 'input', attrs: { type: 'text' } }" />
+        <vxe-column align="center" field="status" width="140" title="状态"
+          :edit-render="{ name: 'VxeSelect', options: [{ label: '启用', value: 1 },{ label: '禁用', value: 0 }] }" />
+
+        <vxe-column
+          align="center"
+          field="site_id"
+          width="160"
+          title="关联站点"
+          :edit-render="{ name: 'VxeTreeSelect', options: siteType, props: { multiple: false }, optionProps: { value: 'id', label: 'name' } }"
+        />
+
+        <vxe-column field="cover_id" min-width="180" title="标题图片" header-align="center" align="left" :edit-render="{}">
+          <template #default="{ row }">
+            <vxe-upload  mode='image' :image-config="{width:40,height:40}" v-model="row['cover']" name-field="original_name" readonly progress-text="{percent}%"
+              :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
+          </template>
+          <template #edit="{ row }">
+            <vxe-upload  mode='image' :image-config="{width:40,height:40}" v-model="row['cover']" name-field="original_name" progress-text="{percent}%"
+              :more-config="{ maxCount: 1, layout: 'horizontal' }" :limit-size="uploadSize / 1024 / 1024"
+              :show-button-text="false" :upload-method="({file}) => uploadMethod(file)" />
+          </template>
+        </vxe-column>
+
+        <vxe-column field="images_ids" min-width="180" title="产品图集" header-align="center" align="left" :edit-render="{}">
+          <template #default="{ row }">
+            <vxe-upload mode='image' :image-config="{width:40,height:40}" v-model="row['images']" name-field="original_name" readonly progress-text="{percent}%"
+              :more-config="{ maxCount:1,layout: 'horizontal' }" :show-button-text="false" />
+          </template>
+          <template #edit="{ row }">
+            <vxe-upload multiple  mode='image' :image-config="{width:40,height:40}" v-model="row['images']" name-field="original_name" progress-text="{percent}%"
+              :more-config="{maxCount:1,layout: 'horizontal' }" :limit-size="uploadSize / 1024 / 1024"
+              :show-button-text="false" :upload-method="({file}) => uploadMethod(file)" />
+          </template>
+        </vxe-column>
+        <vxe-column header-align="center" field="introduce" width="160" title="产品简介"
+          :edit-render="{ introduce: 'input', attrs: { type: 'textarea' } }" />
+
+        <vxe-column align="center" header-align="center" field="content" width="120" title="服务内容" :edit-render="{}">
+          <template #default="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-search"
+              @click="$refs['RichTextModal'].open({ text: row['content'], readonly: true, fieldName: 'content', row })">查看</el-button>
+          </template>
+          <template #edit="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-edit"
+              @click="$refs['RichTextModal'].open({ text: row['content'], readonly: false, fieldName: 'content', row })">编辑</el-button>
+          </template>
+        </vxe-column>
+
+        <vxe-column align="center" header-align="center" field="flow_content" width="120" title="服务流程" :edit-render="{}">
+          <template #default="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-search"
+              @click="$refs['RichTextModal'].open({ text: row['flow_content'], readonly: true, fieldName: 'flow_content', row })">查看</el-button>
+          </template>
+          <template #edit="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-edit"
+              @click="$refs['RichTextModal'].open({ text: row['flow_content'], readonly: false, fieldName: 'flow_content', row })">编辑</el-button>
+          </template>
+        </vxe-column>
+
+        <vxe-column align="center" header-align="center" field="price_content" width="120" title="费用说明" :edit-render="{}">
+          <template #default="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-search"
+              @click="$refs['RichTextModal'].open({ text: row['price_content'], readonly: true, fieldName: 'price_content', row })">查看</el-button>
+          </template>
+          <template #edit="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-edit"
+              @click="$refs['RichTextModal'].open({ text: row['price_content'], readonly: false, fieldName: 'price_content', row })">编辑</el-button>
+          </template>
+        </vxe-column>
+
+        <vxe-column align="center" header-align="center" field="appoint_content" width="120" title="预约须知" :edit-render="{}">
+          <template #default="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-search"
+              @click="$refs['RichTextModal'].open({ text: row['appoint_content'], readonly: true, fieldName: 'appoint_content', row })">查看</el-button>
+          </template>
+          <template #edit="{ row }">
+            <el-button slot="reference" size="small" type="primary" icon="el-icon-edit"
+              @click="$refs['RichTextModal'].open({ text: row['appoint_content'], readonly: false, fieldName: 'appoint_content', row })">编辑</el-button>
+          </template>
+        </vxe-column>
+
+
+
+
+
+        <vxe-column field="operate" header-align="center" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template v-if="isActiveStatus(row)">
+              <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+              <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+            </template>
+            <template v-else>
+              <el-button v-if="isHasAuth('detail')" size="small" type="primary" plain
+                @click="detail(row)">查看</el-button>
+              <el-button v-if="isHasAuth('edit')" size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button v-if="isHasAuth('delete')" size="small" type="danger"
+                @click="destroyRowEvent(row)">删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <el-pagination style="margin-top: 10px;display: flex;justify-content: flex-end;" :current-page.sync="select.page"
+        :page-sizes="[20, 30, 40, 50]" :page-size.sync="select.page_size"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="
+          (e) => {
+            select.page_size = e;
+            select.page = 1;
+            getList();
+          }
+        " @current-change="
+          (e) => {
+            select.page = e;
+            getList();
+          }
+        " />
+
+    </el-card>
+
+    <AddAccompany ref="AddAccompany" :siteType="siteType" :is-show.sync="isShowAdd" @refresh="getList" />
+    <ShowAccompany ref="ShowAccompany" :siteType="siteType" :is-show.sync="isShowDetail" />
+
+    <rich-text-modal ref="RichTextModal" @confirm="({ row, fieldName, text }) => row[fieldName] = text" />
+
+  </div>
+</template>
+
+<script>
+  import VxeUI from 'vxe-pc-ui'
+
+  import RichTextModal from '@/components/RichTextModal/index.vue'
+  import {
+    authMixin
+  } from '@/mixin/authMixin'
+  import {
+    uploadSize
+  } from '@/settings'
+  import {
+    deepCopy
+  } from '@/utils'
+  import {
+    destroy,
+    index,
+    save
+  } from '@/api/accompany/accompany'
+  import AddAccompany from './components/AddAccompany.vue'
+  import ShowAccompany from './components/ShowAccompany.vue'
+  import axios from 'axios'
+  import {
+    getToken
+  } from '@/utils/auth'
+  import { index as siteIndex } from '@/api/site/site'
+
+
+  export default {
+    name: 'Article',
+    components: {
+
+      RichTextModal,
+      AddAccompany,
+      ShowAccompany
+    },
+    mixins: [authMixin],
+    data() {
+      return {
+        uploadSize,
+        examineKey: 0,
+        isShowAdd: false,
+        isShowDetail: false,
+
+        loading: false,
+        tableHeight: 400,
+        select: {
+          page: 1,
+          page_size: 20,
+          keyword: '',
+          type:1,
+          show_relation: ['cover']
+        },
+        total: 0,
+        allAlign: null,
+        tableData: [],
+        form: {
+          id: '',
+          name: '',
+          site_id: '',
+          cover_id: '',
+          images_ids: [],
+          introduce: '',
+          status: 1,
+          content: '',
+          flow_content: '',
+          price_content: '',
+          appoint_content: '',
+          price: '',
+          type:''
+        },
+        validRules: {
+
+          name: [{
+            'required': true,
+            'message': '产品名称必填'
+          }]
+
+        },
+        siteType:[]
+
+
+      }
+    },
+    computed: {
+      isActiveStatus() {
+        return function(row) {
+          if (this.$refs['table']) {
+            return this.$refs['table'].isEditByRow(row)
+          }
+        }
+      },
+      isHasAuth() {
+        return function(auth) {
+          return this.auths_auth_mixin.indexOf(auth) !== -1
+        }
+      }
+    },
+    created() {
+      if(this.$route.path){
+        this.select.type = this.$route.path.split("_")[1]
+        this.form.type = this.$route.path.split("_")[1]
+      }
+      this.getSite()
+      this.getList()
+    },
+    mounted() {
+      this.bindToolbar()
+      this.calcTableHeight()
+    },
+    methods: {
+      calcTableHeight() {
+        const clientHeight = document.documentElement.clientHeight
+        const cardTitle = document.querySelector('.el-card__header')?.getBoundingClientRect()?.height
+        const search = document.querySelector('.vxe-toolbar')?.getBoundingClientRect()?.height
+        const paginationHeight = (document.querySelector('.el-pagination')?.getBoundingClientRect()?.height ?? 0) +
+          10 // 分页的高度
+        const topHeight = 50 // 页面 头部
+        const padding = 80
+        const margin = 20
+        this.tableHeight =
+          clientHeight - cardTitle - search - paginationHeight - topHeight - padding - margin
+      },
+      contextMenuClickEvent({
+        menu,
+        row,
+        column
+      }) {
+        switch (menu.code) {
+          case 'copy':
+            // 示例
+            if (row && column) {
+              if (VxeUI.clipboard.copy(row[column.field])) {
+                this.$message.success('已复制到剪贴板！')
+              }
+            }
+            break
+          case 'remove':
+            if (row && column) {
+              this.destroyRowEvent(row)
+            }
+          default:
+        }
+      },
+      async detail(row) {
+        await this.$refs['ShowAccompany'].getDetail(row.id)
+        this.isShowDetail = true
+      },
+
+      uploadMethod(file) {
+        const formData = new FormData()
+        formData.append('file', file)
+        window.$_uploading = true
+        return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
+          headers: {
+            Authorization: `Bearer ${getToken()}`
+          }
+        }).then((response) => {
+          window.$_uploading = false
+          if (response.status === 200 && !response.data.code) {
+            return {
+              response: response.data,
+              name: response.data.original_name,
+              url: response.data.url
+            }
+          } else {
+            this.$message.error('上传失败')
+          }
+        }).catch(_ => {
+          window.$_uploading = false
+        })
+      },
+      bindToolbar() {
+        this.$nextTick(() => {
+          if (this.$refs['table'] && this.$refs['toolbar']) {
+            this.$refs['table'].connect(this.$refs['toolbar'])
+          }
+        })
+      },
+
+      editRowEvent(row) {
+        if (this.$refs['table']) {
+          this.$refs['table'].setEditRow(row)
+        }
+      },
+      cancelRowEvent(row) {
+        if (this.$refs['table']) {
+          this.$refs['table'].clearEdit().then(() => {
+            // 还原行数据
+            this.$refs['table'].revertData(row)
+          })
+        }
+      },
+      async getSite() {
+        try {
+          const res = await siteIndex({
+            page: 1,
+            page_size: 999,
+          }, false)
+          this.siteType = res.data
+        } catch (err) {
+          console.error(err)
+        }
+      },
+      async getList() {
+        this.loading = true
+        try {
+          const res = await index({
+            ...this.select,
+            filter:[{
+              key:'type',
+              op:'eq',
+              value:this.select.type
+            }]
+          }, false)
+          this.tableData = res.data
+          this.total = res.total
+          this.loading = false
+        } catch (err) {
+          console.error(err)
+          this.loading = false
+        }
+      },
+
+      async saveRowEvent(row) {
+        if (window.$_uploading) {
+          this.$message.warning('文件正在上传中')
+          return
+        }
+        try {
+          const errMap = await this.$refs['table'].validate()
+          if (errMap) {
+            throw new Error(errMap)
+          }
+          await this.$confirm('确认保存？', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消'
+          })
+          await this.$refs['table'].clearEdit()
+          const form = deepCopy(this.form)
+          for (const key in form) {
+            form[key] = row[key]
+          }
+          console.log("this.row",row)
+          if(Array.isArray(row['cover']) && row['cover'].length>0){
+            form['cover_id'] = row['cover'][0]?.response?.id ?? ''
+          }
+          if(row['images'].length>0){
+            let arr = []
+            row['images'].map(item=>{
+              if(item.response){
+                console.log("item.response.id",item.response.id)
+                arr.push(item.response.id)
+              }else{
+                arr.push(item.id)
+              }
+            })
+            form['images_ids'] = arr
+          }else{
+            form['images_ids'] = []
+          }
+          console.log("this.form",form)
+          // return
+          this.loading = true
+          await save(form, false)
+          await this.getList()
+          this.loading = false
+        } catch (err) {
+          this.loading = false
+        }
+      },
+      async destroyRowEvent(row) {
+        try {
+          await this.$confirm('确认删除？', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消'
+          })
+          this.loading = true
+          if (row.id) {
+            await destroy({
+              id: row.id
+            }, false)
+            await this.getList()
+          } else {
+            console.log(row)
+            this.tableData.splice(
+              this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
+              1
+            )
+          }
+          this.loading = false
+        } catch (err) {
+          this.loading = false
+        }
+      }
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .el-card__header {
+    padding: 6px 20px;
+  }
+
+  ::v-deep .el-tag+.el-tag {
+    margin-left: 4px;
+  }
+</style>
diff --git a/src/views/Accompany/components/AddAccompany.vue b/src/views/Accompany/components/AddAccompany.vue
new file mode 100644
index 0000000..7672804
--- /dev/null
+++ b/src/views/Accompany/components/AddAccompany.vue
@@ -0,0 +1,302 @@
+<template>
+  <div>
+    <el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
+      :before-close="handleClose" @close="$emit('update:isShow',false)">
+      <section class="drawer-container">
+        <el-form ref="elForm" class="drawer-container__form" :model="form" :rules="rules" label-position="top"
+          label-width="120px" size="small">
+          <div class="form-layout">
+
+            <el-form-item label="产品名称" prop="name">
+              <el-input v-model="form['name']" clearable placeholder="请填写产品名称" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="产品定价" prop="price">
+              <el-input v-model="form['price']" clearable placeholder="请填写产品定价" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-switch v-model="form['status']" :active-value="1" :inactive-value="0" active-text="启用"
+                inactive-text="禁用" />
+            </el-form-item>
+            <el-form-item label="关联站点" prop="site_id">
+              <vxe-tree-select v-model="form['site_id']" placeholder="请选择关联站点" :options="siteType" clearable
+                :multiple="false" :option-props="{ value: 'id', label: 'name' }" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="标题图片" prop="cover_id">
+              <el-upload :action="action" :file-list="coverList"
+                :headers="{ Authorization: `Bearer ${getToken()}`}"
+                accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                multiple :limit="1" :before-upload="uploadBefore"
+                :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'cover_id')"
+                :on-remove="(file, fileList) => uploadRemove(file, fileList, 'cover_id')"
+                :on-error="(err, file, fileList) => uploadError(err, file, fileList, 'cover_id')">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="产品图集" prop="images_ids">
+              <el-upload :action="action" :file-list="imageList"
+                :headers="{ Authorization: `Bearer ${getToken()}`}"
+                accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                multiple :before-upload="uploadBefore"
+                :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 'images_ids')"
+                :on-remove="(file, fileList) => uploadRemove(file, fileList, 'images_ids')"
+                :on-error="(err, file, fileList) => uploadError(err, file, fileList, 'images_ids')">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">文件不超过{{ formatFileSize(uploadSize) }}</div>
+              </el-upload>
+            </el-form-item>
+            <el-form-item label="产品简介" prop="">
+              <el-input v-model="form['introduce']" type="textarea" clearable placeholder="请填写产品简介"
+                style="width: 100%;" />
+            </el-form-item>
+
+
+            <el-form-item label="服务内容" prop="content">
+              <my-tinymce v-model="form['content']" clearable placeholder="请填写服务内容" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="服务流程" prop="flow_content">
+              <my-tinymce v-model="form['flow_content']" clearable placeholder="请填写服务流程" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="费用说明" prop="price_content">
+              <my-tinymce v-model="form['price_content']" clearable placeholder="请填写费用说明" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item label="预约须知" prop="appoint_content">
+              <my-tinymce v-model="form['appoint_content']" clearable placeholder="请填写预约须知" style="width: 100%;" />
+            </el-form-item>
+
+          </div>
+        </el-form>
+
+        <div class="drawer-container__footer">
+          <el-button @click="reset">重 置</el-button>
+          <el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        </div>
+      </section>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+  import {
+    save
+  } from '@/api/accompany/accompany'
+  import {
+    getToken
+  } from '@/utils/auth'
+  import {
+    uploadSize
+  } from '@/settings'
+  import {
+    formatFileSize
+  } from '@/utils'
+
+  export default {
+    name: 'AccompanyDrawer',
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+
+      siteType: {
+        type: Array,
+        default: () => []
+      }
+
+    },
+    data() {
+      return {
+        uploadSize,
+        action: process.env.VUE_APP_UPLOAD_API,
+        loading: false,
+        visible: false,
+        coverList:[],
+        imageList:[],
+        form: {
+          type: 1,
+          name: '',
+          price: '',
+          status: 1,
+          site_id: '',
+          cover_id: '',
+          images_ids: [],
+          introduce: '',
+          content: '',
+          flow_content: '',
+          price_content: '',
+          appoint_content: '',
+
+        },
+        rules: {
+
+          name: [{
+            'required': true,
+            'message': '产品名称必填'
+          }]
+
+        }
+      }
+    },
+    watch: {
+      isShow(newVal) {
+        this.visible = newVal
+        if(!newVal){
+          this.coverList = []
+          this.imageList = []
+        }
+      },
+      visible(newVal) {
+        this.$emit('update:isShow', newVal)
+      }
+    },
+    methods: {
+      setType(e){
+        console.log("type",e)
+        this.form.type=e?e:1
+      },
+      uploadBefore(file) {
+        if (file.size > uploadSize) {
+          this.$message({
+            type: 'warning',
+            message: `上传图片大小超过${formatFileSize(uploadSize)}！`
+          })
+          return false
+        }
+        window.$_uploading = true
+      },
+      uploadSuccess(response, file, fileList, fieldName) {
+        window.$_uploading = false
+        fileList.forEach((file) => {
+          if (file.response?.data && !file.response?.code) {
+            file.response = file.response.data
+          }
+        })
+        if(fieldName==='cover_id'){
+          this.coverList = fileList
+        }
+        if(fieldName==='images_ids'){
+          this.imageList = fileList
+        }
+      },
+      uploadRemove(file, fileList, fieldName) {
+        if(fieldName==='cover_id'){
+          this.coverList = fileList
+        }
+        if(fieldName==='images_ids'){
+          this.imageList = fileList
+        }
+      },
+      uploadError(err, file, fileList, fieldName) {
+        window.$_uploading = false
+        if(fieldName==='cover_id'){
+          this.coverList = fileList
+        }
+        if(fieldName==='images_ids'){
+          this.imageList = fileList
+        }
+        this.$message({
+          type: 'warning',
+          message: err
+        })
+      },
+      formatFileSize,
+      getToken,
+      handleClose(done) {
+        this.$confirm('确定关闭窗口？')
+          .then(_ => {
+            done()
+          })
+          .catch(_ => {})
+      },
+
+      reset() {
+        this.coverList = []
+        this.imageList = []
+        this.form = {
+          name: '',
+          site_id: '',
+          cover_id: '',
+          images_ids: [],
+          introduce: '',
+          status: 1,
+          content: '',
+          flow_content: '',
+          price_content: '',
+          appoint_content: '',
+          price: '',
+        }
+        this.$refs['elForm'].resetFields()
+      },
+      submit() {
+        if (window.$_uploading) {
+          this.$message.warning('文件正在上传中')
+          return
+        }
+        if(this.coverList.length>0){
+          this.form['cover_id'] = this.coverList[0]?.response?.id ?? ''
+        }else{
+          this.form['cover_id'] = ''
+        }
+        if(this.imageList.length>0){
+          this.imageList.map(item=>{
+            this.form.images_ids.push(item?.response?.id ?? '')
+          })
+        }else{
+          this.form['images_ids'] = []
+        }
+
+        console.log("this.form",this.form)
+        // return
+        this.$refs['elForm'].validate(async valid => {
+          if (valid) {
+            this.loading = true
+            try {
+              await save(this.form)
+              this.$message.success('新增成功')
+              this.$emit('refresh')
+              this.$emit('update:isShow', false)
+              this.loading = false
+              this.reset()
+            } catch (err) {
+              this.loading = false
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .span2 {
+    grid-column: span 2;
+  }
+
+  ::v-deep .el-form-item>* {
+    max-width: 100%;
+  }
+
+  .form-layout {
+    display: grid;
+    grid-gap: 2%;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    &__form {
+      flex: 1;
+      overflow-y: scroll;
+    }
+
+    &__footer {
+      margin-top: 20px;
+      display: flex;
+    }
+  }
+</style>
diff --git a/src/views/Accompany/components/ShowAccompany.vue b/src/views/Accompany/components/ShowAccompany.vue
new file mode 100644
index 0000000..c16bb04
--- /dev/null
+++ b/src/views/Accompany/components/ShowAccompany.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-drawer :title="$route.meta.title" direction="rtl" size="68%" :visible.sync="visible" append-to-body
+      @close="$emit('update:isShow',false)">
+      <section class="drawer-container">
+        <el-descriptions ref="elDesc" class="drawer-container__desc" size="small" border :column="2"
+          direction="vertical" :label-style="{ 'font-weight': '500', 'font-size': '15px' }">
+
+          <el-descriptions-item label="产品名称">
+            {{ form['name'] }}
+          </el-descriptions-item>
+          <el-descriptions-item label="产品定价">
+            {{ form['price'] }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            {{ form['status'] ? '启用' : '禁用' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="关联站点">
+            {{ form['site']?form['site']['name']:'' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="标题图片">
+            <vxe-image :src="form['cover']?form['cover']['url']:''" :width="80"></vxe-image>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="产品图集">
+            <vxe-image :src="form['images']" :width="80"></vxe-image>
+          </el-descriptions-item>
+          <el-descriptions-item label="产品简介" :span="2">
+            {{ form['introduce'] }}
+          </el-descriptions-item>
+          <el-descriptions-item label="服务内容" :span="2">
+            <div v-html="form['content']"></div>
+          </el-descriptions-item>
+          <el-descriptions-item label="服务流程" :span="2">
+            <div v-html="form['flow_content']"></div>
+          </el-descriptions-item>
+          <el-descriptions-item label="费用说明" :span="2">
+            <div v-html="form['price_content']"></div>
+          </el-descriptions-item>
+          <el-descriptions-item label="预约须知" :span="2">
+            <div v-html="form['appoint_content']"></div>
+          </el-descriptions-item>
+
+        </el-descriptions>
+      </section>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+  import {
+    show
+  } from '@/api/accompany/accompany'
+
+  export default {
+    name: 'AccompanyShow',
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+        required: true
+      },
+
+      siteType: {
+        type: Array,
+        default: () => []
+      }
+
+    },
+    data() {
+      return {
+        loading: false,
+        visible: false,
+        form: {
+          id: '',
+          name: '',
+          site_id: '',
+          site: '',
+          cover_id: '',
+          cover: '',
+          images: [],
+          images_ids: [],
+          introduce: '',
+          status: 1,
+          content: '',
+          flow_content: '',
+          price_content: '',
+          appoint_content: '',
+          price: '',
+          type: ''
+        }
+      }
+    },
+    watch: {
+      isShow(newVal) {
+        this.visible = newVal
+      },
+      visible(newVal) {
+        this.$emit('update:isShow', newVal)
+      }
+    },
+    methods: {
+      async getDetail(id) {
+        try {
+          const detail = await show({
+            id,
+            show_relation: ['site', 'cover']
+          })
+          for (const key in this.form) {
+            if (detail.hasOwnProperty(key)) {
+              this.form[key] = detail[key]
+              let arr = []
+              if (detail['images'].length > 0) {
+                detail['images'].map(item => {
+                  arr.push(item.url)
+                })
+                this.form['images'] = arr
+              }
+            }
+          }
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .drawer-container {
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    &>* {
+      flex: 1;
+    }
+  }
+</style>