|
|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <PagingTable url="/web/cases/list" :where="where" ref="table">
|
|
|
+ <template #filter>
|
|
|
+ <!-- <ElButton :icon="Plus" @click="onEdit()">添加</ElButton> -->
|
|
|
+ </template>
|
|
|
+ <ElTableColumn prop="id" label="#" width="80" />
|
|
|
+ <ElTableColumn prop="name" label="案例名称" min-width="120" />
|
|
|
+ <ElTableColumn prop="logo" label="LOGO" min-width="80" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="flex items-center justify-center">
|
|
|
+ <ElImage :src="row.logo" v-if="row.logo" style="width: 30px; height: 30px" fit="cover"></ElImage>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ElTableColumn>
|
|
|
+ <ElTableColumn prop="type" label="行业" min-width="80" />
|
|
|
+ <ElTableColumn prop="tags" label="标签" show-overflow-tooltip min-width="120" />
|
|
|
+ <ElTableColumn prop="desc" label="描述" show-overflow-tooltip min-width="120" />
|
|
|
+ <ElTableColumn prop="info" label="客户概况" show-overflow-tooltip min-width="120" />
|
|
|
+ <ElTableColumn prop="needs" label="客户需求" show-overflow-tooltip min-width="120" />
|
|
|
+ <ElTableColumn prop="solution" label="解决方案" show-overflow-tooltip min-width="120" />
|
|
|
+ <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
|
|
|
+ <ElTableColumn label="操作" align="center" fixed="right" width="150">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <ElButton @click="onEdit(row)">编辑</ElButton>
|
|
|
+ <ElButton @click="deleteRow(row)" type="danger">删除</ElButton>
|
|
|
+ </template>
|
|
|
+ </ElTableColumn>
|
|
|
+ </PagingTable>
|
|
|
+ <EditDialog
|
|
|
+ v-model="showEditDialog"
|
|
|
+ :model="model"
|
|
|
+ :rules="rules"
|
|
|
+ :on-submit="submit"
|
|
|
+ @success="table.refresh()"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <ElFormItem prop="name" label="标题">
|
|
|
+ <ElInput v-model="model.name" placeholder="请输入标题" />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="logo" label="LOGO">
|
|
|
+ <SingleUpload v-model="model.logo" />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="type" label="行业">
|
|
|
+ <ElInput v-model="model.type" placeholder="请输入行业" />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="tags" label="标签">
|
|
|
+ <div class="form-input" v-for="(item, index) in model.tags" :key="index">
|
|
|
+ <ElInput type="text" v-model="model.tags[index]" placeholder="请输入内容" />
|
|
|
+ <el-button type="danger" size="mini" plain @click="delVal(index, 'tags')">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <el-button type="primary" size="mini" plain @click="addVal('tags')">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="desc" label="描述">
|
|
|
+ <ElInput type="textarea" v-model="model.desc" placeholder="请输入描述" autosize />
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="info" label="客户概况">
|
|
|
+ <div class="form-input" v-for="(item, index) in model.info" :key="index">
|
|
|
+ <ElInput type="text" v-model="model.info[index].name" placeholder="请输入内容" />
|
|
|
+ <ElInput type="text" v-model="model.info[index].val" placeholder="请输入内容" />
|
|
|
+ <el-button type="danger" size="mini" plain @click="delVal(index, 'info')">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <el-button type="primary" size="mini" plain @click="addVal('info')">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="needs" label="客户需求">
|
|
|
+ <div class="form-input" v-for="(item, index) in model.needs" :key="index">
|
|
|
+ <ElInput type="text" v-model="model.needs[index]" placeholder="请输入内容" />
|
|
|
+ <el-button type="danger" size="mini" plain @click="delVal(index, 'needs')">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <el-button type="primary" size="mini" plain @click="addVal('needs')">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+ <ElFormItem prop="solution" label="解决方案">
|
|
|
+ <div class="form-input" v-for="(item, index) in model.solution" :key="index">
|
|
|
+ <ElInput type="text" v-model="model.solution[index]" placeholder="请输入内容" />
|
|
|
+ <el-button type="danger" size="mini" plain @click="delVal(index, 'solution')">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="form-input">
|
|
|
+ <el-button type="primary" size="mini" plain @click="addVal('solution')">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+ </EditDialog>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import PagingTable from '@/components/PagingTable.vue'
|
|
|
+import { useTimeFormatter } from '@/utils/formatter'
|
|
|
+import { Plus } from '@vicons/tabler'
|
|
|
+import EditDialog from '@/components/EditDialog.vue'
|
|
|
+import { setupEditDialog } from '@/utils/editDialog'
|
|
|
+import EnumSelect from '@/components/EnumSelect.vue'
|
|
|
+import { http } from '@/plugins/http'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { useClipboard } from '@vueuse/core'
|
|
|
+import SingleUpload from '@/components/SingleUpload.vue'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useUserStore } from '@/stores/user'
|
|
|
+
|
|
|
+const { user } = storeToRefs(useUserStore())
|
|
|
+const role = computed(() => user.value?.roles[0])
|
|
|
+const where = computed(() => {
|
|
|
+ if (role.value === 'admin')
|
|
|
+ return {
|
|
|
+ del: 0
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ orgId: user.value.orgId,
|
|
|
+ del: 0
|
|
|
+ }
|
|
|
+})
|
|
|
+const timeFormatter = useTimeFormatter()
|
|
|
+const table = ref(null)
|
|
|
+const model = ref({})
|
|
|
+const rules = {
|
|
|
+ name: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
|
|
|
+}
|
|
|
+const { showEditDialog } = setupEditDialog(model)
|
|
|
+
|
|
|
+function onEdit(row) {
|
|
|
+ model.value = {
|
|
|
+ ...row,
|
|
|
+ tags: row.tags.split(','),
|
|
|
+ info: row.info.split('_;').map((_info) => {
|
|
|
+ let vals = _info.split('_,')
|
|
|
+ return {
|
|
|
+ name: vals.length > 0 ? vals[0] : '',
|
|
|
+ val: vals.length > 1 ? vals[1] : ''
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ needs: row.needs.split('_;'),
|
|
|
+ solution: row.solution.split('_;')
|
|
|
+ }
|
|
|
+ showEditDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+async function delVal(index, key) {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('此操作将永久删除数据, 是否继续?', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ model.value[key].splice(index, 1)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ } catch (error) {
|
|
|
+ if ('cancel' !== error) ElMessage.error(error.message)
|
|
|
+ }
|
|
|
+}
|
|
|
+function addVal(key) {
|
|
|
+ if (key === 'info') {
|
|
|
+ model.value[key].push({ name: '', val: '' })
|
|
|
+ } else {
|
|
|
+ model.value[key].push('')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function submit() {
|
|
|
+ let data = { ...model.value }
|
|
|
+ data.tags = model.value.tags
|
|
|
+ .filter((item) => {
|
|
|
+ return !!item && item !== ' '
|
|
|
+ })
|
|
|
+ .join(',')
|
|
|
+ data.needs = model.value.needs
|
|
|
+ .filter((item) => {
|
|
|
+ return !!item && item !== ' '
|
|
|
+ })
|
|
|
+ .join('_;')
|
|
|
+
|
|
|
+ data.info = model.value.info
|
|
|
+ .filter((item) => {
|
|
|
+ return (!!item.name || item.name === '') && (!!item.val || item.val === '')
|
|
|
+ })
|
|
|
+ .map((item) => {
|
|
|
+ return item.name + '_,' + item.val
|
|
|
+ })
|
|
|
+ .join('_;')
|
|
|
+ data.solution = model.value.solution
|
|
|
+ .filter((item) => {
|
|
|
+ return !!item && item !== ' '
|
|
|
+ })
|
|
|
+ .join('_;')
|
|
|
+ console.log(data)
|
|
|
+
|
|
|
+ await http.put(data.id ? `/web/cases/save/${data.id}` : '/web/cases/save', data)
|
|
|
+ ElMessage.success('保存成功')
|
|
|
+ table.value.refresh()
|
|
|
+}
|
|
|
+function getToken(row) {
|
|
|
+ http.get(`/auth/admin/user/${row.id}/token`).then((res) => {
|
|
|
+ const { copy } = useClipboard({ legacy: true })
|
|
|
+ copy(res.access_token)
|
|
|
+ ElMessage.success('复制成功')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+async function deleteRow(row) {
|
|
|
+ try {
|
|
|
+ await ElMessageBox.confirm('此操作将永久删除数据, 是否继续?', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ await http.delete(`/web/cases/del/${row.id}`)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ table.value.refresh()
|
|
|
+ } catch (error) {
|
|
|
+ if ('cancel' !== error) ElMessage.error(error.message)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.form-input {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .el-input + .el-input {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .el-input + .el-button {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.form-input + .form-input {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+</style>
|