|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card style="margin: 15px">
|
|
|
+ <div>
|
|
|
+ <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel" style="margin: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.type')" prop="type">
|
|
|
+ <el-select v-model="formmodel.type"
|
|
|
+ :placeholder="this.$t('deviceMenuDetailManage.chooseType')"
|
|
|
+ filterable clearable>
|
|
|
+ <el-option v-for="(item,index) in deviceMenuDetailTypeTransfer" :key="index" :label="item.key" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.user')" prop="customer_id">
|
|
|
+ <el-select v-model="formmodel.customer_id"
|
|
|
+ :placeholder="this.$t('deviceMenuDetailManage.chooseUser')"
|
|
|
+ filterable clearable>
|
|
|
+ <el-option v-for="(item,index) in users" :key="index" :label="item.named" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.hospitalAddr')" prop="hospital_addr" maxlength="50">
|
|
|
+ <el-input v-model="formmodel.hospital_addr" :placeholder="this.$t('deviceMenuDetailManage.inputHospitalAddr')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.hospitalTel')" prop="hospital_tel" maxlength="50">
|
|
|
+ <el-input v-model="formmodel.hospital_tel" :placeholder="this.$t('deviceMenuDetailManage.inputHospitalTel')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.hospital_web')" prop="hospital_web" maxlength="50">
|
|
|
+ <el-input v-model="formmodel.hospital_web" :placeholder="this.$t('deviceMenuDetailManage.inputHospitalWeb')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-form-item :label="partClerkStr"
|
|
|
+ v-for="(item, index) in formmodelPartClerk" :key="'a' + index">
|
|
|
+ <el-col :span="4" style="margin: 0 10px 0 0">
|
|
|
+ <el-select v-model="item.clerk_id"
|
|
|
+ :placeholder="choosePartClerkStr"
|
|
|
+ filterable clearable>
|
|
|
+ <el-option v-for="(_item,index) in clerks" :key="index" :label="_item.role_name + '-' + _item.clerk_name" :value="_item.clerk_id" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" style="margin: auto">
|
|
|
+ <el-button v-if="index === 0" type="primary" @click="addInput(formmodelPartClerk)"> {{ addStr }} </el-button>
|
|
|
+ <el-button v-else type="danger" @click="delInput(formmodelPartClerk, index)"> {{ delStr }} </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.titleIcon')">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="`${titleIconUploadUrl}?scene=avatar`"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="titleIconUploaded"
|
|
|
+ :before-upload="handleTitleIconBefore"
|
|
|
+ accept=".png,.jpeg,.jpg"
|
|
|
+ >
|
|
|
+ <img v-if="titleIconUrl" :src="titleIconUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.titleBg')">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="`${titleBgUploadUrl}?scene=avatar`"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="titleBgUploaded"
|
|
|
+ :before-upload="handleTitleBgBefore"
|
|
|
+ accept=".png,.jpeg,.jpg"
|
|
|
+ >
|
|
|
+ <img v-if="titleBgUrl" :src="titleBgUrl" class="rightullidiv">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.title')" prop="title" maxlength="50">
|
|
|
+ <el-input v-model="formmodel.title" :placeholder="this.$t('deviceMenuDetailManage.inputTitle')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.summary')" prop="summary">
|
|
|
+ <el-input v-model="formmodel.summary" :placeholder="this.$t('deviceMenuDetailManage.inputSummary')" type="textarea" :maxlength="200" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.detail')" prop="detail">
|
|
|
+ <wangEditor v-model="formmodel.detail" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.tags')" prop="tags">
|
|
|
+ <el-input v-model="formmodel.tags" :placeholder="this.$t('deviceMenuDetailManage.inputTags')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div align="center" class="margin-top-sm">
|
|
|
+ <el-button type="primary" @click="handlerFormSubmit('editform')">{{ this.$t('action.save') }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {DEVICE_MENU_DETAIL_TYPE} from "@/utils/enum/DeviceMenuDetailTypeEnum";
|
|
|
+import wangEditor from "@/components/WangEdiitor/wangEditor";
|
|
|
+import {getListByPartId} from "@/api/ncs_customer";
|
|
|
+import * as API_DeviceMenuDetail from '@/api/ncs_device_menu_detail'
|
|
|
+import * as API_Clerk from '@/api/ncs_clerk'
|
|
|
+
|
|
|
+const serverUrl = domain.serverUrl
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ components: { wangEditor },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rules: {
|
|
|
+ type: [
|
|
|
+ { required: true, message: this.$t('deviceMenuDetailManage.chooseType'), trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ title: [
|
|
|
+ { required: true, message: this.$t('deviceMenuDetailManage.inputTitle'), trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ formmodel: {
|
|
|
+ menu_id: this.$route.params.id,
|
|
|
+ part_id: this.$route.params.part_id
|
|
|
+ },
|
|
|
+ formmodelPartClerk: [{
|
|
|
+ clerk_id: '',
|
|
|
+ }],
|
|
|
+ loading: false,
|
|
|
+ users: [],
|
|
|
+ clerks: [],
|
|
|
+ titleIconUploadUrl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
+ titleIconUrl: '',
|
|
|
+ titleBgUploadUrl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
+ titleBgUrl: '',
|
|
|
+ deviceMenuDetailTypeTransfer: DEVICE_MENU_DETAIL_TYPE.getKeyValueList(),
|
|
|
+ partClerkStr: this.$t('deviceMenuDetailManage.partClerk'),
|
|
|
+ choosePartClerkStr: this.$t('deviceMenuDetailManage.choosePartClerk'),
|
|
|
+ actIntentStr: this.$t('deviceMenuManage.actIntent'),
|
|
|
+ addStr: this.$t('action.add'),
|
|
|
+ delStr: this.$t('action.delete')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getModel()
|
|
|
+ this.getEmployees()
|
|
|
+ this.getClerkList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getModel() {
|
|
|
+ this.loading = true
|
|
|
+ API_DeviceMenuDetail.getModelByMenuId(this.formmodel.menu_id).then(res => {
|
|
|
+ if (res) {
|
|
|
+ this.formmodel = res
|
|
|
+ this.titleIconUrl = res.title_icon
|
|
|
+ this.titleBgUrl = res.title_bg
|
|
|
+ this.formmodelPartClerk = this.strToId(this.formmodel.part_clerk)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.titleIconUrl = ''
|
|
|
+ this.titleBgUrl = ''
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getClerkList() {
|
|
|
+ const _this = this
|
|
|
+ API_Clerk.getClerkVoByPartId(this.formmodel.part_id).then(res => {
|
|
|
+ _this.clerks = res
|
|
|
+ this.clerks = _this.clerks.filter(item => item.role_id !== 0 && item.role_id !== 1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 上传成功后的钩子 更换图片 置空存储数组*/
|
|
|
+ titleIconUploaded(res) {
|
|
|
+ this.titleIconUrl = serverUrl + '/' + res
|
|
|
+ this.formmodel.title_icon = this.titleIconUrl
|
|
|
+ },
|
|
|
+ titleBgUploaded(res) {
|
|
|
+ this.titleBgUrl = serverUrl + '/' + res
|
|
|
+ this.formmodel.title_bg = this.titleBgUrl
|
|
|
+ },
|
|
|
+ /** 图片上传之前的校验 */
|
|
|
+ handleTitleIconBefore(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+
|
|
|
+ if (!isImg) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error(this.$t('action.uploaderSize2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const image = new Image()
|
|
|
+ image.onload = () => {
|
|
|
+ const width = image.width
|
|
|
+ const height = image.height
|
|
|
+ if (width > 500 || width < 100) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (width !== height) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (height > 500 || height < 100) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg3'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ image.src = event.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 图片上传之前的校验 */
|
|
|
+ handleTitleBgBefore(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 10
|
|
|
+
|
|
|
+ if (!isImg) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error(this.$t('action.uploaderSize3'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const image = new Image()
|
|
|
+ image.onload = () => {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ image.src = event.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlerFormSubmit() {
|
|
|
+ console.log(this.formmodel)
|
|
|
+ this.formmodel.part_clerk = this.idToStr(this.formmodelPartClerk)
|
|
|
+ this.loading = true
|
|
|
+ if (this.formmodel.id) {
|
|
|
+ API_DeviceMenuDetail.update(this.formmodel.id, this.formmodel).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.success(this.$t('action.saveSuccess'))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ API_DeviceMenuDetail.add(this.formmodel).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.success(this.$t('action.saveSuccess'))
|
|
|
+ this.formmodel = res
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getEmployees() {
|
|
|
+ const _this = this
|
|
|
+ _this.users = []
|
|
|
+ getListByPartId(this.$store.getters.partId).then(res => {
|
|
|
+ _this.users = res
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addInput(paramsTemp){
|
|
|
+ paramsTemp.push({
|
|
|
+ clerk_id: '',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ delInput(paramsTemp, index) {
|
|
|
+ paramsTemp.splice(index, 1)
|
|
|
+ },
|
|
|
+ idToStr(list) {
|
|
|
+ let partClerkStr = ''
|
|
|
+ let partClerk = []
|
|
|
+ let clerk = {}
|
|
|
+ if (list.length !== 0) {
|
|
|
+ console.log('list', list)
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ console.log('list[i]', list[i])
|
|
|
+ if (list[i].clerk_id !== '') {
|
|
|
+ clerk = this.clerks.filter(item => item.clerk_id === list[i].clerk_id)[0]
|
|
|
+ partClerk.push({
|
|
|
+ clerk_id: clerk.clerk_id,
|
|
|
+ type: clerk.role_type,
|
|
|
+ name: clerk.role_name,
|
|
|
+ value: clerk.clerk_name
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ partClerkStr = JSON.stringify(partClerk)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ partClerkStr = ''
|
|
|
+ }
|
|
|
+ return partClerkStr
|
|
|
+ },
|
|
|
+ strToId(str) {
|
|
|
+ const partClerks = []
|
|
|
+ if (str !== null && str !== '') {
|
|
|
+ let partClerk = JSON.parse(str)
|
|
|
+ if (partClerk.length !== 0) {
|
|
|
+ for (let i = 0; i < partClerk.length; i++) {
|
|
|
+ partClerks.push({
|
|
|
+ clerk_id: partClerk[i].clerk_id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (partClerks.length !== 0) {
|
|
|
+ return partClerks
|
|
|
+ } else {
|
|
|
+ return [{
|
|
|
+ clerk_id: ''
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.rightullidiv {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .rightulliimg {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|