|
|
@@ -0,0 +1,199 @@
|
|
|
+<!-- 管理员管理-管理员管理-编辑 -->
|
|
|
+<template>
|
|
|
+ <app-drawer title="编辑" width="900" v-model:show="show" :refresh="refresh" :loading="loading">
|
|
|
+ <el-form ref="formRef" class="el-form--horizontal" label-width="auto" :model="formData" :rules="formRules"
|
|
|
+ :show-message="false">
|
|
|
+ <el-form-item label="名称(中文)" prop="marketsectionname">
|
|
|
+ <el-input v-model="formData.marketsectionname" maxlength="50" :placeholder="t('common.pleaseenter')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="Name(英文)" prop="marketsectionnameen">
|
|
|
+ <el-input v-model="formData.marketsectionnameen" maxlength="50"
|
|
|
+ :placeholder="t('common.pleaseenter')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名稱(繁体)" prop="marketsectionnamezhtw">
|
|
|
+ <el-input v-model="formData.marketsectionnamezhtw" maxlength="50"
|
|
|
+ :placeholder="t('common.pleaseenter')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="ชื่อ(泰文)" prop="marketsectionnameth">
|
|
|
+ <el-input v-model="formData.marketsectionnameth" maxlength="50"
|
|
|
+ :placeholder="t('common.pleaseenter')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="Tên(越南语)" prop="marketsectionnamevi">
|
|
|
+ <el-input v-model="formData.marketsectionnamevi" maxlength="50"
|
|
|
+ :placeholder="t('common.pleaseenter')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" prop="orderindex">
|
|
|
+ <el-input-number v-model="formData.orderindex" :placeholder="t('common.pleaseenter')" :min="0" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片（90*90）" prop="pictureurl">
|
|
|
+ <app-upload v-model="uploadFiles" :file-types="['image']" :type-message="t('common.tips21')"
|
|
|
+ :max-size="uploadConfig.maxFileSize" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="包含市场">
|
|
|
+ <app-table :data="tableList" :columns="tableColumns">
|
|
|
+ <template #headerLeft>
|
|
|
+ <el-button icon="Plus" plain @click="openComponent('TradeMode')">新增</el-button>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template #operate="{ index }">
|
|
|
+ <el-button icon="Delete" size="small" plain circle @click="deleteMarket(index)" />
|
|
|
+ </template>
|
|
|
+ </app-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="onCancel(false)">{{ t('operation.cancel') }}</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit">{{ t('operation.submit') }}</el-button>
|
|
|
+ </template>
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ record }" @submit="updateMarket"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
+ </app-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, PropType, onMounted, defineAsyncComponent } from 'vue'
|
|
|
+import { ElMessage, FormInstance, FormRules, UploadUserFile } from 'element-plus'
|
|
|
+import { parseFilePaths, extractFilePaths } from '@/filters'
|
|
|
+import { uploadConfig } from '@/constants/common'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+import { delMarket, marketSetDetail } from '@/services/api/base'
|
|
|
+import { i18n } from '@/stores'
|
|
|
+import AppDrawer from '@pc/components/base/drawer/index.vue'
|
|
|
+import AppUpload from '@pc/components/base/upload/index.vue'
|
|
|
+import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ record: {
|
|
|
+ type: Object as PropType<Base.MarketSetRsp>
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['TradeMode', defineAsyncComponent(() => import('./trademode.vue'))], // 新增市场
|
|
|
+])
|
|
|
+
|
|
|
+const t = i18n.global.t
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+const show = ref(true)
|
|
|
+const refresh = ref(false)
|
|
|
+const uploadFiles = ref<UploadUserFile[]>([])
|
|
|
+const tableList = ref<Base.MarketSetDetailRsp['configs']>([])
|
|
|
+
|
|
|
+const formData = ref<Base.DelMarketReq>({
|
|
|
+ list: [],
|
|
|
+ marketsectionname: '',
|
|
|
+ marketsectionnameen: '',
|
|
|
+ marketsectionnameth: '',
|
|
|
+ marketsectionnamevi: '',
|
|
|
+ marketsectionnamezhtw: '',
|
|
|
+ orderindex: 1,
|
|
|
+ pictureurl: ''
|
|
|
+})
|
|
|
+
|
|
|
+const tableColumns = ref<Model.TableColumn[]>([
|
|
|
+ { field: 'orderindex', label: '顺序' },
|
|
|
+ { field: 'displayname', label: '名称(中文)' },
|
|
|
+ { field: 'displaynameen', label: 'Name(英文)' },
|
|
|
+ { field: 'displaynamezhtw', label: '名稱(繁体)' },
|
|
|
+ { field: 'displaynameth', label: 'ชื่อ(泰文)' },
|
|
|
+ { field: 'displaynamevi', label: 'Tên(越南语)' },
|
|
|
+ { field: 'marketnames', label: '市场名称' },
|
|
|
+ { field: 'operate', label: '操作', fixed: 'right' }
|
|
|
+])
|
|
|
+
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
+
|
|
|
+const { loading, run } = useRequest(marketSetDetail, {
|
|
|
+ manual: true,
|
|
|
+ onSuccess: ((res) => {
|
|
|
+ const data = res.data
|
|
|
+
|
|
|
+ formData.value = {
|
|
|
+ list: [],
|
|
|
+ marketsectionid: props.record?.marketsectionid,
|
|
|
+ marketsectionname: data.marketsectionname,
|
|
|
+ marketsectionnameen: data.marketsectionnameen,
|
|
|
+ marketsectionnameth: data.marketsectionnameth,
|
|
|
+ marketsectionnamevi: data.marketsectionnamevi,
|
|
|
+ marketsectionnamezhtw: data.marketsectionnamezhtw,
|
|
|
+ orderindex: data.orderindex,
|
|
|
+ pictureurl: data.pictureurl,
|
|
|
+ }
|
|
|
+
|
|
|
+ tableList.value = data.configs
|
|
|
+ uploadFiles.value = parseFilePaths(data.pictureurl)
|
|
|
+ }),
|
|
|
+ onError: (err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: FormRules = {
|
|
|
+ marketsectionname: [{ required: true }],
|
|
|
+ marketsectionnameen: [{ required: true }],
|
|
|
+ marketsectionnamezhtw: [{ required: true }],
|
|
|
+ marketsectionnameth: [{ required: true }],
|
|
|
+ marketsectionnamevi: [{ required: true }],
|
|
|
+ orderindex: [{ required: true }],
|
|
|
+}
|
|
|
+
|
|
|
+// 更新数据
|
|
|
+const updateMarket = (data: Base.MarketSetDetailRsp['configs'][number]) => {
|
|
|
+ if (!tableList.value.some((e) => e.trademode === data.trademode)) {
|
|
|
+ tableList.value.push(data)
|
|
|
+ } else {
|
|
|
+ ElMessage.warning('已存在相同交易模式')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除市场
|
|
|
+const deleteMarket = (index: number) => {
|
|
|
+ tableList.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ const rawData = { ...formData.value }
|
|
|
+
|
|
|
+ rawData.pictureurl = extractFilePaths(uploadFiles.value)
|
|
|
+ rawData.list = tableList.value.map((e) => ({
|
|
|
+ displayname: e.displayname,
|
|
|
+ displaynameen: e.displaynameen,
|
|
|
+ displaynameth: e.displaynameth,
|
|
|
+ displaynamevi: e.displaynamevi,
|
|
|
+ displaynamezhtw: e.displaynamezhtw,
|
|
|
+ marketids: e.marketids,
|
|
|
+ orderindex: e.orderindex,
|
|
|
+ trademode: e.trademode,
|
|
|
+ }))
|
|
|
+
|
|
|
+ formRef.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true
|
|
|
+ delMarket({
|
|
|
+ data: rawData
|
|
|
+ }).then(() => {
|
|
|
+ ElMessage.success(t('common.tips3'))
|
|
|
+ onCancel(true)
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(t('common.tips4') + err)
|
|
|
+ }).finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onCancel = (isRefresh = false) => {
|
|
|
+ show.value = false
|
|
|
+ refresh.value = isRefresh
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const marketsectionid = props.record?.marketsectionid
|
|
|
+ if (marketsectionid) {
|
|
|
+ run({ marketsectionid })
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
