technique_admin/src/views/system/design/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <custom-form v-model="form" :fields="fields" :rules="rules" @save="toSave">
            <template #agreement>
              <WangEditor v-model="form.agreement" />
            </template>
            <template #brief>
              <WangEditor v-model="form.brief" />
            </template>
            <template #logoUrl>
              <custom-upload model="logoUrl" :list="form.logoUrl" :limit="1" listType="picture-card" url="/files/web/cxyy_design/upload" @change="onUpload"></custom-upload>
            </template>
            <template #carouselUrl>
              <custom-upload model="carouselUrl" :list="form.carouselUrl" :limit="6" :showList="false" url="/files/web/cxyy_design/upload" @change="onUpload"></custom-upload>
              <el-table :data="form.carouselUrl">
                <el-table-column align="center" label="轮播图片">
                  <template #default="{ row }">
                    <template v-if="row.uri">
                      <el-image :src="row.uri" fit="contain" width="200px" height="200px"></el-image>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="跳转地址">
                  <template #default="{ row }">
                    <el-input v-model="row.to" placeholder="跳转地址"></el-input>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template #default="{ row }">
                    <el-button type="danger" text @click="toDeleteCarousel(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- <template #friend>
              <el-col :span="24" class="tables">
                <el-col :span="24" class="tables_1">
                  <el-button type="primary" @click="addFriend()">添加</el-button>
                </el-col>
                <el-col :span="24">
                  <el-table :data="form.friend" border>
                    <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
                    <el-table-column prop="url" label="图片" align="center">
                      <template #default="scope">
                        <custom-upload
                          model="url"
                          :list="scope.row.url"
                          :limit="1"
                          listType="picture-card"
                          url="/files/web/cxyy_design/upload"
                          @change="onFriendUpload($event, scope.row)"
                        ></custom-upload>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" align="center">
                      <template #default="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入名称" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="href" label="跳转网址" align="center">
                      <template #default="scope">
                        <el-input v-model="scope.row.href" placeholder="请输入跳转网址" />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                      <template #default="scope">
                        <el-button type="danger" @click="delFriend(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-col>
            </template> -->
            <template #friendship>
              <el-col :span="24" class="tables">
                <el-col :span="24" class="tables_1">
                  <el-button type="primary" @click="addFriendship()">添加</el-button>
                </el-col>
                <el-col :span="24">
                  <el-table :data="form.friendship" border>
                    <el-table-column type="index" label="序号" width="80" align="center"> </el-table-column>
                    <el-table-column prop="name" label="名称" align="center">
                      <template #default="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入名称" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" align="center">
                      <template #default="scope">
                        <el-select v-model="scope.row.type" placeholder="请选择类型">
                          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="href" label="跳转网址" align="center">
                      <template #default="scope">
                        <el-input v-model="scope.row.href" placeholder="请输入跳转网址" />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                      <template #default="scope">
                        <el-button type="danger" @click="delFriendship(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-col>
            </template>
            <template #footInfo>
              <div class="footInfo">
                <custom-form v-model="form.footInfo" :fields="footFields" :rules="footRules" :useSave="false">
                  <template #Logo>
                    <custom-upload model="Logo" :list="form.footInfo.Logo" listType="picture-card" :limit="1" url="/files/web/cxyy_design/upload" @change="onFUpload"></custom-upload>
                  </template>
                  <template #Code>
                    <custom-upload model="Code" :list="form.footInfo.Code" listType="picture-card" :limit="1" url="/files/web/cxyy_design/upload" @change="onFUpload"></custom-upload>
                  </template>
                </custom-form>
              </div>
            </template>
          </custom-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import moment from 'moment'
import { cloneDeep, get } from 'lodash-es'
import { DesignStore } from '@/store/api/platform/design'
const store = DesignStore()
const $checkRes = inject('$checkRes')
// 加载中
const loading = ref(false)
// 表单
const form = ref({ footInfo: {} })
const fields = ref([
  { label: '标题', model: 'zhTitle' },
  { label: 'logo', model: 'logoUrl', custom: true },
  { label: '轮播图', model: 'carouselUrl', custom: true },
  // { label: '合作伙伴', model: 'friend', custom: true },
  { label: '友情连接', model: 'friendship', custom: true },
  { label: '网站底部信息', model: 'footInfo', custom: true },
  { label: '使用协议', model: 'agreement', custom: true },
  { label: '关于我们', model: 'brief', custom: true }
])
const rules = ref({
  zhTitle: [{ required: true, message: '请输入标题' }],
  agreement: [{ required: true, message: '请输入使用协议' }],
  logoUrl: [{ required: false, message: '请上传logo图片' }]
})
const footFields = ref([
  { label: 'LOGO图片', model: 'Logo', custom: true },
  { label: '联系电话', model: 'Phone' },
  { label: '电子邮箱', model: 'Email' },
  { label: '地址', model: 'Address' },
  { label: '底部导航', model: 'Copyright' },
  { label: '公司', model: 'Company' },
  { label: '二维码图片', model: 'Code', custom: true }
])
const footRules = ref({
  Phone: [{ required: true, message: '请输入联系电话' }],
  Email: [{ required: true, message: '请输入电子邮箱' }],
  Address: [{ required: true, message: '请输入地址' }],
  Copyright: [{ required: true, message: '请输入底部导航' }],
  Company: [{ required: true, message: '请输入公司' }],
  Code: [{ required: true, message: '请上传二维码图片' }]
})
const typeList = ref([
  { value: '热门高校', label: '热门高校' },
  { value: '政府部门', label: '政府部门' },
  { value: '科研机构', label: '科研机构' }
])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {
  const res = await store.query()
  if (res.errcode == '0') {
    form.value = res.data[0] || { footInfo: {} }
  }
}
// 提交保存
const toSave = async () => {
  const data = cloneDeep(form.value)
  let res
  if (get(data, 'id')) res = await store.update(data)
  else res = await store.create(data)
  if ($checkRes(res, true)) search()
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
// 上传图片
const onFUpload = (e) => {
  const { model, value } = e
  form.value.footInfo[model] = value
}
// // 上传图片
// const onFriendUpload = (e, data) => {
//   const { model, value } = e
//   data[model] = value
// }
// // 合作伙伴添加
// const addFriend = () => {
//   let friend = form.value.friend || []
//   friend.push({ id: moment().valueOf(), url: [], name: '', href: '' })
//   form.value.friend = friend
// }
// // 合作伙伴删除
// const delFriend = (e) => {
//   let friend = form.value.friend.filter((i) => i.id != e.id)
//   form.value.friend = friend
// }
// 友情连接添加
const addFriendship = () => {
  let friendship = form.value.friendship || []
  friendship.push({ id: moment().valueOf(), name: '', type: '', href: '' })
  form.value.friendship = friendship
}
// 友情连接删除
const delFriendship = (e) => {
  let friendship = form.value.friendship.filter((i) => i.id != e.id)
  form.value.friendship = friendship
}

const toDeleteCarousel = (data) => {
  const key = 'uri'
  const index = form.value.carouselUrl.findIndex((f) => f[key] === data[key])
  console.log(index)
  if (index >= 0) form.value.carouselUrl.splice(index, 1)
}
</script>
<style scoped lang="scss">
.tables {
  .tables_1 {
    margin: 0 0 10px 0;
  }
}
.footInfo {
  width: 100%;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 5px;
  :deep(.el-form-item) {
    margin-bottom: 18px !important;
  }
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }
}
</style>