4 changed files with 544 additions and 17 deletions
-
2.env.development
-
3src/views/deviceManage/map3d/map.vue
-
127src/views/deviceManage/shelfManage/shelf3dPosition.vue
-
429src/views/weChatMiniProgram/index.vue
@ -0,0 +1,429 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container"> |
||||
|
<div class="content-area"> |
||||
|
<div class="area-config"> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">数据接口</span> |
||||
|
<!-- 原数据接口表单 --> |
||||
|
<el-form ref="openForm" :model="openForm" size="small" label-width="100px"> |
||||
|
<el-form-item label="域名地址" prop="open_lib_http"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.openForm.open_lib_http" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('openForm', 'open_lib_http')" |
||||
|
> |
||||
|
{{ openForm.open_lib_http }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="openFormopen_lib_http" |
||||
|
v-model="openForm.open_lib_http" |
||||
|
@blur="handleBlur('openForm', 'open_lib_http')" |
||||
|
@keyup.enter="handleBlur('openForm', 'open_lib_http')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="AppId" prop="open_lib_appId"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.openForm.open_lib_appId" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
|
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('openForm', 'open_lib_appId')" |
||||
|
> |
||||
|
{{ openForm.open_lib_appId }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="openFormopen_lib_appId" |
||||
|
v-model="openForm.open_lib_appId" |
||||
|
@blur="handleBlur('openForm', 'open_lib_appId')" |
||||
|
@keyup.enter="handleBlur('openForm', 'open_lib_appId')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Secret" prop="open_lib_secret"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.openForm.open_lib_secret" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('openForm', 'open_lib_secret')" |
||||
|
> |
||||
|
{{ openForm.open_lib_secret }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="openFormopen_lib_secret" |
||||
|
v-model="openForm.open_lib_secret" |
||||
|
@blur="handleBlur('openForm', 'open_lib_secret')" |
||||
|
@keyup.enter="handleBlur('openForm', 'open_lib_secret')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="sm4-key" prop="sm4_key"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.openForm.sm4_key" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('openForm', 'sm4_key')" |
||||
|
> |
||||
|
{{ openForm.sm4_key }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="openFormsm4_key" |
||||
|
v-model="openForm.sm4_key" |
||||
|
@blur="handleBlur('openForm', 'sm4_key')" |
||||
|
@keyup.enter="handleBlur('openForm', 'sm4_key')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="opac_url" prop="opac_url"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.openForm.opac_url" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('openForm', 'opac_url')" |
||||
|
> |
||||
|
{{ openForm.opac_url }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="openFormopac_url" |
||||
|
v-model="openForm.opac_url" |
||||
|
@blur="handleBlur('openForm', 'opac_url')" |
||||
|
@keyup.enter="handleBlur('openForm', 'opac_url')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- <div class="config-remarks">双击输入框可进行编辑。</div> --> |
||||
|
</div> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">小程序绑定</span> |
||||
|
<el-form ref="vxForm" :model="vxForm" size="small" label-width="100px"> |
||||
|
<el-form-item label="AppID" prop="vx_mini_appId"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.vxForm.vx_mini_appId" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('vxForm', 'vx_mini_appId')" |
||||
|
> |
||||
|
{{ vxForm.vx_mini_appId }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="vxFormvx_mini_appId" |
||||
|
v-model="vxForm.vx_mini_appId" |
||||
|
@blur="handleBlur('vxForm', 'vx_mini_appId')" |
||||
|
@keyup.enter="handleBlur('vxForm', 'vx_mini_appId')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="AppSecret" prop="vx_mini_secret"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.vxForm.vx_mini_secret" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('vxForm', 'vx_mini_secret')" |
||||
|
> |
||||
|
{{ vxForm.vx_mini_secret }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="vxFormvx_mini_secret" |
||||
|
v-model="vxForm.vx_mini_secret" |
||||
|
@blur="handleBlur('vxForm', 'vx_mini_secret')" |
||||
|
@keyup.enter="handleBlur('vxForm', 'vx_mini_secret')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- <div class="config-remarks">双击输入框可进行编辑。</div> --> |
||||
|
</div> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">管理员绑定</span> |
||||
|
<el-form ref="adminForm" :model="adminForm" size="small" label-width="100px"> |
||||
|
<el-form-item label="账号" prop="op_user"> |
||||
|
<el-tooltip |
||||
|
v-if="!editStatus.adminForm.op_user" |
||||
|
class="item" |
||||
|
effect="dark" |
||||
|
content="双击输入框进行编辑" |
||||
|
placement="top" |
||||
|
> |
||||
|
<span |
||||
|
class="edit-readonly" |
||||
|
@dblclick="handleDblClick('adminForm', 'op_user')" |
||||
|
> |
||||
|
{{ adminForm.op_user }} |
||||
|
</span> |
||||
|
</el-tooltip> |
||||
|
<el-input |
||||
|
v-else |
||||
|
ref="adminFormop_user" |
||||
|
v-model="adminForm.op_user" |
||||
|
@blur="handleBlur('adminForm', 'op_user')" |
||||
|
@keyup.enter="handleBlur('adminForm', 'op_user')" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- <div class="config-remarks">双击输入框可进行编辑。</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchInitScreenSetting, FetchEditScreenSetting } from '@/api/digitalScreen/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'WeChatMiniProgram', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
openForm: { |
||||
|
open_lib_http: null, |
||||
|
open_lib_appId: null, |
||||
|
open_lib_secret: null, |
||||
|
sm4_key: null, |
||||
|
opac_url: null |
||||
|
}, |
||||
|
vxForm: { |
||||
|
vx_mini_appId: null, |
||||
|
vx_mini_secret: null |
||||
|
}, |
||||
|
adminForm: { |
||||
|
op_user: null |
||||
|
}, |
||||
|
editStatus: { |
||||
|
openForm: { |
||||
|
open_lib_http: false, |
||||
|
open_lib_appId: false, |
||||
|
open_lib_secret: false, |
||||
|
sm4_key: false, |
||||
|
opac_url: false |
||||
|
}, |
||||
|
vxForm: { |
||||
|
vx_mini_appId: false, |
||||
|
vx_mini_secret: false |
||||
|
}, |
||||
|
adminForm: { |
||||
|
op_user: false |
||||
|
} |
||||
|
}, |
||||
|
originalValues: { |
||||
|
openForm: {}, |
||||
|
vxForm: {}, |
||||
|
adminForm: {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi', |
||||
|
'user' |
||||
|
]) |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initScreenSetting() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化智慧大屏基本数据 |
||||
|
initScreenSetting() { |
||||
|
FetchInitScreenSetting({ 'libcode': this.user.fonds.fondsNo }).then(res => { |
||||
|
Object.values(res).forEach(item => { |
||||
|
const { code, context } = item |
||||
|
|
||||
|
// 处理数据接口相关 |
||||
|
if (code === 'open_lib_http') { |
||||
|
this.openForm.open_lib_http = context |
||||
|
} else if (code === 'open_lib_appId') { |
||||
|
this.openForm.open_lib_appId = context |
||||
|
} else if (code === 'open_lib_secret') { |
||||
|
this.openForm.open_lib_secret = context |
||||
|
} else if (code === 'sm4_key') { |
||||
|
this.openForm.sm4_key = context |
||||
|
} else if (code === 'opac_url') { |
||||
|
this.openForm.opac_url = context |
||||
|
} |
||||
|
|
||||
|
// 处理微信小程序绑定相关 |
||||
|
if (code === 'vx_mini_appId') { |
||||
|
this.vxForm.vx_mini_appId = context |
||||
|
} else if (code === 'vx_mini_secret') { |
||||
|
this.vxForm.vx_mini_secret = context |
||||
|
} |
||||
|
|
||||
|
// 处理管理员绑定 |
||||
|
if (code === 'op_user') { |
||||
|
this.adminForm.op_user = context |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 其他表单编辑框 |
||||
|
handleDblClick(formName, field) { |
||||
|
this.originalValues[formName][field] = this[formName][field] |
||||
|
this.editStatus[formName][field] = true |
||||
|
this.$nextTick(() => { |
||||
|
const input = this.$refs[`${formName}${field}`] |
||||
|
if (input) input.focus() |
||||
|
}) |
||||
|
}, |
||||
|
handleBlur(formName, field) { |
||||
|
this.editStatus[formName][field] = false |
||||
|
if (this[formName][field] !== this.originalValues[formName][field]) { |
||||
|
this.saveEdit(formName, field) |
||||
|
} |
||||
|
}, |
||||
|
saveEdit(formName, field) { |
||||
|
console.log(this.user) |
||||
|
const code = field |
||||
|
const context = this[formName][field] |
||||
|
const libcode = this.user.fonds.fondsNo |
||||
|
const remarks = '' |
||||
|
|
||||
|
if (!context && context !== 0) { |
||||
|
// 其他字段的非空校验 |
||||
|
this.$message.warning(`${this.getFieldLabel(formName, field)}不能为空`) |
||||
|
this.rollbackValue(formName, field) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 3. 构建提交参数 |
||||
|
const submitParam = { code, context, libcode, remarks } |
||||
|
|
||||
|
// 4. 调用接口保存 |
||||
|
FetchEditScreenSetting(submitParam) |
||||
|
.then(() => { |
||||
|
this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`) |
||||
|
// 更新原始值为新值 |
||||
|
// if (formName === 'title') { |
||||
|
// this.originalTitle = this.screen_title |
||||
|
// this.originalValues.title = this.screen_title |
||||
|
// } else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') { |
||||
|
// // 更新屏幕的originalTime |
||||
|
// const screenItem = this.screenItems.find(item => item.code === field) |
||||
|
// if (screenItem) { |
||||
|
// screenItem.originalTime = context |
||||
|
// } |
||||
|
// this.originalValues[formName][field] = context |
||||
|
// } else if (formName !== 'specialFields' || field !== 'show_screen') { |
||||
|
// this.originalValues[formName][field] = context |
||||
|
// } |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`) |
||||
|
this.rollbackValue(formName, field) |
||||
|
}) |
||||
|
}, |
||||
|
// 新增：回滚值的通用方法 |
||||
|
rollbackValue(formName, field) { |
||||
|
if (this.originalValues[formName]?.[field] !== undefined) { |
||||
|
if (formName === 'title') { |
||||
|
this.screen_title = this.originalValues[formName][field] |
||||
|
} else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') { |
||||
|
// 回滚屏幕时长 |
||||
|
const screenItem = this.screenItems.find(item => item.code === field) |
||||
|
if (screenItem) { |
||||
|
screenItem.time = this.originalValues[formName][field] |
||||
|
screenItem.originalTime = this.originalValues[formName][field] |
||||
|
} |
||||
|
} else if (formName === 'specialFields') { |
||||
|
this[field] = this.originalValues[formName][field] |
||||
|
} else { |
||||
|
this[formName][field] = this.originalValues[formName][field] |
||||
|
// 回滚复选框状态 |
||||
|
if (formName === 'librarySettingForm') { |
||||
|
const originalChecked = this.originalValues[formName][`${field}_checked`] |
||||
|
if (originalChecked !== undefined) { |
||||
|
this[formName][`${field}_checked`] = originalChecked |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
getFieldLabel(formName, field) { |
||||
|
const labels = { |
||||
|
openForm: { |
||||
|
open_lib_http: '域名地址', |
||||
|
open_lib_appId: 'AppId', |
||||
|
open_lib_secret: 'Secret', |
||||
|
sm4_key: 'SM4密钥', |
||||
|
opac_url: 'OPAC地址' |
||||
|
}, |
||||
|
vxForm: { |
||||
|
vx_mini_appId: '微信小程序AppID', |
||||
|
vx_mini_secret: '微信小程序Secret' |
||||
|
}, |
||||
|
adminForm: { |
||||
|
op_user: '管理员账号' |
||||
|
} |
||||
|
} |
||||
|
return labels[formName][field] || field |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import "~@/assets/styles/digitalScreen.scss"; |
||||
|
.content-area { |
||||
|
height: 734px; |
||||
|
border-radius: 4px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue