|
|
@@ -4,6 +4,7 @@ import partyIDSelect from './components/partyIDSelect.vue'
|
|
|
import GroupNameSelect from './components/GroupNameSelect.vue'
|
|
|
import { VueDraggable } from 'vue-draggable-plus'
|
|
|
import AdjustmentField from './components/AdjustmentField.vue'
|
|
|
+import { cloneDeep, uniq, uniqueId } from 'lodash'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const route = useRoute()
|
|
|
@@ -20,22 +21,30 @@ onMounted(() => {
|
|
|
$api
|
|
|
.editReportTemplate({ serial_no: route.query.serial_no })
|
|
|
.then((res) => {
|
|
|
+ if (res.code !== 200) return
|
|
|
+ const data = res.data
|
|
|
infoData.value = {
|
|
|
// 如果是复制的话，清空Report Name
|
|
|
- reportName: route.query.copy !== 't' ? res.data.reportName : '',
|
|
|
- reportLevel: res.data.reportLevel,
|
|
|
- reportDescription: res.data.reportDescription
|
|
|
+ reportName: route.query.copy !== 't' ? data.reportName : '',
|
|
|
+ reportLevel: data.reportLevel,
|
|
|
+ reportDescription: data.reportDescription
|
|
|
}
|
|
|
- fieldsList.value = res.data.reportFields
|
|
|
- accessControlType.value = res.data.reportAccess.type
|
|
|
+ fieldsList.value = data.reportFields.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ uniqueId: generate8DigitUnique()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const reportAccess = data.reportAccess
|
|
|
+ accessControlType.value = reportAccess.type
|
|
|
specificRoles.value = {
|
|
|
- partyId: res.data.reportAccess.partyId,
|
|
|
- groupName: res.data.reportAccess.groupName
|
|
|
+ partyId: reportAccess.partyId,
|
|
|
+ groupName: reportAccess.groupName,
|
|
|
+ systemAccount: reportAccess.systemAccount
|
|
|
}
|
|
|
})
|
|
|
.finally(() => {
|
|
|
pageLoading.value = false
|
|
|
-
|
|
|
watch(accessControlType, (newVal) => {
|
|
|
if (newVal === 'Specific Roles') {
|
|
|
// 等待下一个渲染周期结束后，获取detailRef的高度
|
|
|
@@ -54,6 +63,7 @@ onMounted(() => {
|
|
|
})
|
|
|
|
|
|
interface Field {
|
|
|
+ uniqueId: string
|
|
|
field: string
|
|
|
title: string
|
|
|
displayName: string
|
|
|
@@ -61,6 +71,7 @@ interface Field {
|
|
|
value?: string
|
|
|
isFilter: boolean
|
|
|
isSort: boolean
|
|
|
+ groupName: string
|
|
|
}
|
|
|
const fieldsList = ref<Field[]>([])
|
|
|
const levelOptions = [
|
|
|
@@ -78,8 +89,34 @@ const levelOptions = [
|
|
|
}
|
|
|
]
|
|
|
|
|
|
-const handleDeleteField = (field: string) => {
|
|
|
- fieldsList.value = fieldsList.value.filter((item) => item.field !== field)
|
|
|
+// 前端使用的唯一标识符
|
|
|
+const generate8DigitUnique = () => {
|
|
|
+ return Math.floor(10000000 + Math.random() * 90000000).toString()
|
|
|
+}
|
|
|
+
|
|
|
+const changeFieldConfig = (state: any, field: string, index: number, key: string) => {
|
|
|
+ if (!state) return
|
|
|
+ fieldsList.value.forEach((item) => {
|
|
|
+ if (item.field === field) {
|
|
|
+ item[key] = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const firstMatch = fieldsList.value[index]
|
|
|
+ if (firstMatch) {
|
|
|
+ firstMatch[key] = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleDeleteField = (index: number) => {
|
|
|
+ fieldsList.value.splice(index, 1)
|
|
|
+}
|
|
|
+const handleCopyField = (index: number) => {
|
|
|
+ const curField = cloneDeep(fieldsList.value[index])
|
|
|
+ curField.displayName = `${curField.displayName} (Copy)`
|
|
|
+ curField.isFilter = false
|
|
|
+ curField.isSort = false
|
|
|
+ curField.uniqueId = generate8DigitUnique()
|
|
|
+ fieldsList.value.splice(index + 1, 0, curField)
|
|
|
}
|
|
|
|
|
|
const AdjustmentFieldRef = ref()
|
|
|
@@ -96,7 +133,8 @@ const handleCustomizeColumns = () => {
|
|
|
AdjustmentFieldRef.value.openDialog(
|
|
|
params,
|
|
|
-220,
|
|
|
- 'Drag item over to this selection or click "add" icon to show the field on report template list'
|
|
|
+ 'Drag item over to this selection or click "add" icon to show the field on report template list',
|
|
|
+ fieldsList.value
|
|
|
)
|
|
|
}
|
|
|
|
|
|
@@ -128,11 +166,13 @@ const addNewField = () => {
|
|
|
return
|
|
|
}
|
|
|
fieldsList.value.unshift({
|
|
|
+ uniqueId: generate8DigitUnique(),
|
|
|
field: newFieldInfo.value.name,
|
|
|
title: newFieldInfo.value.name,
|
|
|
displayName: newFieldInfo.value.name,
|
|
|
value: newFieldInfo.value.value,
|
|
|
fieldType: 'Custom',
|
|
|
+ groupName: '',
|
|
|
isFilter: false,
|
|
|
isSort: false
|
|
|
})
|
|
|
@@ -148,16 +188,13 @@ const handleApplay = (data: any) => {
|
|
|
const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
|
|
|
fieldsList.value = data.map((item: any) => {
|
|
|
return {
|
|
|
- field: item.field,
|
|
|
- title: item.label,
|
|
|
- displayName: item.label,
|
|
|
- fieldType: item.fieldType,
|
|
|
- isFilter: false,
|
|
|
- isSort: false,
|
|
|
- fieldLevel: item.fieldLevel,
|
|
|
- groupName: item.groupName,
|
|
|
- ids: item.ids,
|
|
|
- dataType: item.dataType
|
|
|
+ ...item,
|
|
|
+ label: item.label,
|
|
|
+ title: item.title || item.label,
|
|
|
+ displayName: item.displayName || item.label,
|
|
|
+ isFilter: !!item.isFilter,
|
|
|
+ isSort: !!item.isSort,
|
|
|
+ uniqueId: item.uniqueId || generate8DigitUnique()
|
|
|
}
|
|
|
})
|
|
|
fieldsList.value = [...customizeData, ...fieldsList.value]
|
|
|
@@ -168,7 +205,8 @@ const detailRef: Ref<HTMLElement | null> = ref(null)
|
|
|
|
|
|
const specificRoles = ref({
|
|
|
partyId: [],
|
|
|
- groupName: []
|
|
|
+ groupName: [],
|
|
|
+ systemAccount: ''
|
|
|
})
|
|
|
const changePartyId = (val: string[]) => {
|
|
|
specificRoles.value.partyId = val
|
|
|
@@ -184,23 +222,32 @@ const handleCancel = () => {
|
|
|
router.push('/template-management')
|
|
|
}
|
|
|
|
|
|
-const handleSave = () => {
|
|
|
+const handlePageSave = () => {
|
|
|
+ let verified = true
|
|
|
if (!infoData.value.reportName.trim()) {
|
|
|
ElMessage.warning('Please enter the Report Name.')
|
|
|
+ verified = false
|
|
|
}
|
|
|
if (!infoData.value.reportLevel) {
|
|
|
ElMessage.warning('Please enter the Report Level')
|
|
|
+ verified = false
|
|
|
}
|
|
|
if (!infoData.value.reportDescription.trim()) {
|
|
|
ElMessage.warning('Please enter the Report Description.')
|
|
|
+ verified = false
|
|
|
}
|
|
|
if (
|
|
|
accessControlType.value === 'Specific Roles' &&
|
|
|
- (specificRoles.value.partyId.length === 0 || specificRoles.value.groupName.length === 0)
|
|
|
+ specificRoles.value.partyId.length === 0 &&
|
|
|
+ specificRoles.value.groupName.length === 0 &&
|
|
|
+ specificRoles.value.systemAccount
|
|
|
) {
|
|
|
ElMessage.warning('Please select Party ID or Group Name for Specific Roles access control.')
|
|
|
+ verified = false
|
|
|
+ }
|
|
|
+ if (!verified) {
|
|
|
+ return
|
|
|
}
|
|
|
-
|
|
|
const data = {
|
|
|
report_name: infoData.value.reportName,
|
|
|
report_level: infoData.value.reportLevel,
|
|
|
@@ -208,6 +255,7 @@ const handleSave = () => {
|
|
|
access_type: accessControlType.value,
|
|
|
party_ids: specificRoles.value.partyId || [],
|
|
|
group_names: specificRoles.value.groupName || [],
|
|
|
+ system_account: specificRoles.value.systemAccount,
|
|
|
fieldsList: fieldsList.value
|
|
|
}
|
|
|
let serial_no = ''
|
|
|
@@ -233,7 +281,7 @@ const handleSave = () => {
|
|
|
<span class="font_family icon-icon_return_b" style="margin-right: 3px"></span
|
|
|
>Cancel</el-button
|
|
|
>
|
|
|
- <el-button class="el-button--main" @click="handleSave">
|
|
|
+ <el-button class="el-button--main" @click="handlePageSave">
|
|
|
<span class="font_family icon-icon_save_b" style="margin-right: 3px"></span
|
|
|
>Save</el-button
|
|
|
>
|
|
|
@@ -295,7 +343,7 @@ const handleSave = () => {
|
|
|
<el-button
|
|
|
v-if="fieldsList.length > 0"
|
|
|
class="el-button--dark"
|
|
|
- @click="handleCustomizeColumns"
|
|
|
+ @click="handleCustomizeColumns()"
|
|
|
style="width: 110px; padding-top: 11px"
|
|
|
>
|
|
|
<span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
|
|
|
@@ -319,38 +367,56 @@ const handleSave = () => {
|
|
|
:forceFallback="true"
|
|
|
fallback-class="fallback-class"
|
|
|
group="customizeColumns"
|
|
|
- item-key="field"
|
|
|
+ item-key="uniqueId"
|
|
|
@end="handleRightRemove"
|
|
|
+ handle=".handle-draggable"
|
|
|
>
|
|
|
- <div class="field-item" v-for="fieldItem in fieldsList" :key="fieldItem.field">
|
|
|
+ <div
|
|
|
+ class="field-item"
|
|
|
+ v-for="(fieldItem, index) in fieldsList"
|
|
|
+ :key="fieldItem.uniqueId"
|
|
|
+ >
|
|
|
<span
|
|
|
- class="font_family icon-icon_dragsort__b draggable-icon"
|
|
|
+ class="font_family icon-icon_dragsort__b draggable-icon handle-draggable"
|
|
|
style="margin-right: 12px; font-size: 16px"
|
|
|
></span>
|
|
|
- <div class="label">
|
|
|
+ <div class="label handle-draggable">
|
|
|
<span style="font-weight: 700">[{{ fieldItem.field }}]</span>
|
|
|
<span style="margin-left: 8px">{{ fieldItem.title }}</span>
|
|
|
</div>
|
|
|
<el-input
|
|
|
+ :id="fieldItem.uniqueId"
|
|
|
+ :name="fieldItem.uniqueId"
|
|
|
class="display-name"
|
|
|
v-model="fieldItem.displayName"
|
|
|
placeholder="Display Name in Report"
|
|
|
></el-input>
|
|
|
<div class="actions">
|
|
|
- <div>
|
|
|
+ <div class="checkbox-group">
|
|
|
<el-checkbox
|
|
|
- :disabled="fieldItem.fieldType !== 'System'"
|
|
|
+ :disabled="
|
|
|
+ fieldItem.fieldType !== 'System' ||
|
|
|
+ fieldItem.groupName === 'Container Status' ||
|
|
|
+ fieldItem.groupName === 'Milestone'
|
|
|
+ "
|
|
|
v-model="fieldItem.isFilter"
|
|
|
+ @change="changeFieldConfig($event, fieldItem.field, index, 'isFilter')"
|
|
|
>Filter</el-checkbox
|
|
|
>
|
|
|
<el-checkbox
|
|
|
:disabled="fieldItem.fieldType !== 'System'"
|
|
|
v-model="fieldItem.isSort"
|
|
|
+ @change="changeFieldConfig($event, fieldItem.field, index, 'isSort')"
|
|
|
>Sort</el-checkbox
|
|
|
>
|
|
|
</div>
|
|
|
<span
|
|
|
- @click="handleDeleteField(fieldItem.field)"
|
|
|
+ style="margin-right: 4px"
|
|
|
+ @click="handleCopyField(index)"
|
|
|
+ class="font_family icon-icon_clone_b"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ @click="handleDeleteField(index)"
|
|
|
class="font_family icon-icon_delete_b"
|
|
|
></span>
|
|
|
</div>
|
|
|
@@ -396,7 +462,7 @@ const handleSave = () => {
|
|
|
:data="specificRoles.partyId"
|
|
|
></partyIDSelect>
|
|
|
</div>
|
|
|
- <div class="filter-item">
|
|
|
+ <div class="filter-item" style="margin-bottom: 16px">
|
|
|
<div class="label">
|
|
|
<span style="color: var(--color-danger)">*</span>
|
|
|
<span>Group Name</span>
|
|
|
@@ -406,6 +472,16 @@ const handleSave = () => {
|
|
|
:data="specificRoles.groupName"
|
|
|
></GroupNameSelect>
|
|
|
</div>
|
|
|
+ <div class="filter-item">
|
|
|
+ <div class="label">
|
|
|
+ <span style="color: var(--color-danger)">*</span>
|
|
|
+ <span>KLN ONLINE Account</span>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ placeholder="Please enter KLN ONLINE Account"
|
|
|
+ v-model="specificRoles.systemAccount"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -491,7 +567,8 @@ const handleSave = () => {
|
|
|
border: 1px solid var(--color-border);
|
|
|
border-bottom: none;
|
|
|
border-width: 0 0 1px 0;
|
|
|
- padding: 16px 24px 8px;
|
|
|
+ padding: 16px 24px 12px;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
.template-box {
|
|
|
margin-bottom: 8px;
|
|
|
@@ -549,7 +626,7 @@ const handleSave = () => {
|
|
|
align-items: center;
|
|
|
height: 48px;
|
|
|
margin-bottom: 8px;
|
|
|
- padding: 16px;
|
|
|
+ padding: 0 16px;
|
|
|
border-radius: 6px;
|
|
|
border: 1px solid var(--color-border);
|
|
|
.label {
|
|
|
@@ -559,7 +636,7 @@ const handleSave = () => {
|
|
|
}
|
|
|
}
|
|
|
.display-name {
|
|
|
- flex: 1.3;
|
|
|
+ flex: 1.2;
|
|
|
margin: 0 16px;
|
|
|
:deep(.el-input__wrapper) {
|
|
|
height: 32px;
|
|
|
@@ -569,7 +646,11 @@ const handleSave = () => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- width: 160px;
|
|
|
+ width: 240px;
|
|
|
+ padding-left: 30px;
|
|
|
+ .checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
.el-checkbox {
|
|
|
margin-right: 16px;
|
|
|
:deep(.el-checkbox__inner) {
|
|
|
@@ -583,6 +664,7 @@ const handleSave = () => {
|
|
|
}
|
|
|
}
|
|
|
:deep(.el-checkbox__label) {
|
|
|
+ margin-top: 3px;
|
|
|
padding-left: 4px;
|
|
|
line-height: 2;
|
|
|
}
|
Jack Zhou
