主题设置页面完成
This commit is contained in:
		| @@ -1,178 +1,16 @@ | ||||
| <template> | ||||
|   <section class="AppQyWxConfig"> | ||||
|     <ai-list> | ||||
|       <ai-title slot="title" title="企业微信配置" isShowBottomBorder/> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template #left> | ||||
|             <el-button type="primary" @click="add" icon="iconfont iconAdd">新增</el-button> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input size="small" placeholder="搜索名称" v-model="search.name" clearable | ||||
|                       @clear="page.current = 1,search.name = '', getTableData()" | ||||
|                       v-throttle="() => {page.current = 1, getTableData()}"/> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" | ||||
|                   @getList="getTableData" :col-configs="colConfigs"> | ||||
|           <el-table-column type="expand" slot="expand"> | ||||
|             <template slot-scope="{row}"> | ||||
|               <ai-wrapper> | ||||
|                 <ai-info-item labelWidth="200px" v-for="op in desConfigs" :key="op.prop" :value="row[op.prop]" | ||||
|                               v-bind="op"/> | ||||
|               </ai-wrapper> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="status" align="center" label="状态" width="150"> | ||||
|             <template v-slot="{ row }"> | ||||
|               <el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" | ||||
|                          active-color="#5088FF" inactive-color="#D0D4DC"></el-switch> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="miniappStatus" align="center" label="小程序状态" width="150"> | ||||
|             <template v-slot="{ row }"> | ||||
|               <el-switch v-model="row.miniappStatus" @change="onMiniappStatusChange(row)" active-value="1" | ||||
|                          inactive-value="0" | ||||
|                          active-color="#5088FF" inactive-color="#D0D4DC"></el-switch> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="options" align="center" label="操作" width="400"> | ||||
|             <el-row type="flex" justify="center" align="middle" slot-scope="{row}"> | ||||
|               <el-button type="text" @click="detail(row)">详情</el-button> | ||||
|               <el-button type="text" @click="del(row)">删除</el-button> | ||||
|               <el-button type="text" @click="handleSystemInfo(row.id)">系统信息</el-button> | ||||
|               <el-button type="text" @click="handlePush(row.id)">推送随手拍样式</el-button> | ||||
|             </el-row> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|  | ||||
|     <ai-dialog title="新增" :visible.sync="dialog" width="800px" @onConfirm="confirm"> | ||||
|       <el-form ref="form" :model="dialogForm" :rules="rules" size="small" label-width="180px"> | ||||
|         <el-form-item required label="名称" prop="name"> | ||||
|           <el-input v-model.trim="dialogForm.name" placeholder="请输入名称" show-word-limit maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信ID" prop="corpId"> | ||||
|           <el-input v-model.trim="dialogForm.corpId" placeholder="请输入企业微信ID" show-word-limit maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信通讯录SECRET" prop="corpAddressBookSecret"> | ||||
|           <el-input v-model.trim="dialogForm.corpAddressBookSecret" placeholder="请输入企业微信通讯录SECRET" show-word-limit | ||||
|                     maxlength="64"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信AESKEY" prop="corpAeskey"> | ||||
|           <el-input v-model.trim="dialogForm.corpAeskey" placeholder="请输入企业微信AESKEY" show-word-limit | ||||
|                     maxlength="64"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信AGENTID" prop="corpAgentId"> | ||||
|           <el-input v-model.trim="dialogForm.corpAgentId" placeholder="请输入企业微信AGENTID" show-word-limit | ||||
|                     maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="随手拍AGENTID" prop="clapAgentId"> | ||||
|           <el-input v-model.trim="dialogForm.clapAgentId" placeholder="请输入随手拍AGENTID" show-word-limit | ||||
|                     maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信SECRET" prop="corpSecret"> | ||||
|           <el-input v-model.trim="dialogForm.corpSecret" placeholder="请输入企业微信SECRET" show-word-limit | ||||
|                     maxlength="255"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信TOKEN" prop="corpToken"> | ||||
|           <el-input v-model.trim="dialogForm.corpToken" placeholder="请输入企业微信TOKEN" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序APPID" prop="miniappAppid"> | ||||
|           <el-input v-model.trim="dialogForm.miniappAppid" placeholder="请输入小程序APPID" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序SECRET" prop="miniappSecret"> | ||||
|           <el-input v-model.trim="dialogForm.miniappSecret" placeholder="请输入小程序SECRET" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企微访问域名" prop="dvcpUrl"> | ||||
|           <el-input v-model.trim="dialogForm.dvcpUrl" placeholder="请输入企微访问域名" show-word-limit maxlength="128"> | ||||
|             <template slot="prepend">Http://</template> | ||||
|           </el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="web访问域名" prop="webUrl"> | ||||
|           <el-input v-model.trim="dialogForm.webUrl" placeholder="请输入web访问域名" show-word-limit maxlength="128"> | ||||
|             <template slot="prepend">Http://</template> | ||||
|           </el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="地区" prop="areaId"> | ||||
|           <ai-area-select :instance="instance" v-model="dialogForm.areaId" alwaysShow | ||||
|                           @name="(e)=>dialogForm.areaName=e"/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="地图中心点" prop="lat"> | ||||
|           <el-button type="primary" icon="iconfont iconAdd" @click="showMap=true">设置地点</el-button> | ||||
|           <div v-if="dialogForm.lat">{{ dialogForm.address }}</div> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="状态" prop="status"> | ||||
|           <el-radio-group v-model.trim="dialogForm.status"> | ||||
|             <el-radio label="1">启用</el-radio> | ||||
|             <el-radio label="0">禁用</el-radio> | ||||
|           </el-radio-group> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序状态" prop="miniappStatus"> | ||||
|           <el-radio-group v-model.trim="dialogForm.miniappStatus"> | ||||
|             <el-radio label="1">启用</el-radio> | ||||
|             <el-radio label="0">禁用</el-radio> | ||||
|           </el-radio-group> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="系统配置信息" prop="systemInfo"> | ||||
|           <el-input type="textarea" :rows="2" placeholder="请输入系统配置信息" v-model="dialogForm.systemInfo" | ||||
|                     maxlength="50000"/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|     <ai-dialog title="地图" :visible.sync="showMap" @opened="initMap" width="800px" class="mapDialog" | ||||
|                @onConfirm="selectMap"> | ||||
|       <div id="map"></div> | ||||
|       <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" | ||||
|                 autocomplete="on" | ||||
|                 @change="placeSearch.search(searchPlace)"> | ||||
|         <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button> | ||||
|       </el-input> | ||||
|       <div id="searchPlaceOutput"/> | ||||
|     </ai-dialog> | ||||
|     <ai-dialog title="系统信息设置" :visible.sync="sysInfoDialog" width="600px" @onConfirm="submitSystemInfo" | ||||
|                @closed="sysInfo={}"> | ||||
|       <el-form size="small" label-width="140px"> | ||||
|         <el-form-item label="页签标题"> | ||||
|           <el-input v-model="sysInfo.title" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="系统标题"> | ||||
|           <el-input v-model="sysInfo.fullTitle" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="logo"> | ||||
|           <el-input v-model="sysInfo.logo" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="登录页左上角标题"> | ||||
|           <el-input v-model="sysInfo.name" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="登录页副标题"> | ||||
|           <el-input type="textarea" rows="5" v-model="sysInfo.desc" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|  | ||||
|         <el-form-item label="版权所有"> | ||||
|           <el-input v-model="sysInfo.recordDesc" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="备案号"> | ||||
|           <el-input v-model="sysInfo.recordNo" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="备案跳转链接"> | ||||
|           <el-input v-model="sysInfo.recordURL" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|     <component :is="currentPage" v-bind="$props"/> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {mapState} from "vuex"; | ||||
| import AMapLoader from "@amap/amap-jsapi-loader" | ||||
| import List from "./list"; | ||||
| import ThemeSetting from "./themeSetting"; | ||||
|  | ||||
| export default { | ||||
|   name: "AppQyWxConfig", | ||||
|   components: {ThemeSetting, List}, | ||||
|   label: "企业微信配置", | ||||
|   props: { | ||||
|     instance: Function, | ||||
| @@ -180,300 +18,18 @@ export default { | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         {slot: 'expand'}, | ||||
|         {prop: "name", label: "名称"}, | ||||
|         {prop: "corpId", label: "企业微信ID", width: 180}, | ||||
|         {slot: "status",}, | ||||
|         {slot: "miniappStatus"}, | ||||
|         {prop: "createTime", label: "创建时间"}, | ||||
|         {slot: "options"}, | ||||
|       ] | ||||
|     }, | ||||
|     desConfigs() { | ||||
|       let isLine = true | ||||
|       return [ | ||||
|         {prop: "corpAddressBookSecret", label: "企业微信通讯录SECRET", width: 200}, | ||||
|         {prop: "corpAgentId", label: "企业微信AGENTID", width: 150}, | ||||
|         {prop: "corpSecret", label: "企业微信SECRET", isLine}, | ||||
|         {prop: "corpToken", label: "企业微信TOKEN", width: 150}, | ||||
|         {prop: "corpAeskey", label: "企业微信AESKEY", width: 150}, | ||||
|         {prop: "miniappAppid", label: "小程序APPID", width: 150}, | ||||
|         {prop: "miniappSecret", label: "小程序SECRET", width: 150}, | ||||
|         {prop: "areaId", label: "地区编码", width: 150, isLine}, | ||||
|         {prop: "lat", label: "纬度", width: 100}, | ||||
|         {prop: "lng", label: "经度", width: 100}, | ||||
|         {prop: "address", label: "中心点", width: 100, isLine}, | ||||
|         {prop: "webUrl", label: "管理端地址", width: 100}, | ||||
|         {prop: "dvcpUrl", label: "企微端地址", width: 100}, | ||||
|       ] | ||||
|     }, | ||||
|     rules() { | ||||
|       return { | ||||
|         name: [{required: true, message: "请填写名称"}], | ||||
|         corpId: [{required: true, message: "请填写企业微信ID"}], | ||||
|         corpAddressBookSecret: [{required: true, message: "请填写企业微信通讯录SECRET"}], | ||||
|         corpAeskey: [{required: true, message: "请填写企业微信AESKEY"}], | ||||
|         corpAgentId: [{required: true, message: "请填写企业微信AGENTID"}], | ||||
|         corpSecret: [{required: true, message: "请填写企业微信SECRET"}], | ||||
|         corpToken: [{required: true, message: "请填写企业微信TOKEN"}], | ||||
|         miniappAppid: [{required: true, message: "请填写小程序APPID"}], | ||||
|         miniappSecret: [{required: true, message: "请填写小程序SECRET"}], | ||||
|         dvcpUrl: [{required: true, message: "请填写企微访问域名"}], | ||||
|         webUrl: [{required: true, message: "请填写web访问域名"}], | ||||
|         status: [{required: true, message: "请选择状态", trigger: "change"}], | ||||
|         miniappStatus: [{required: true, message: "请选择小程序状态", trigger: "change"}], | ||||
|         areaId: [{required: true, message: "请选择地区", trigger: "change"}], | ||||
|         lat: [{required: true, message: "请选择中心点"}], | ||||
|         systemInfo: [{required: true, message: "请输入系统配置信息"}], | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       page: {current: 1, size: 10, total: 0}, | ||||
|       dialog: false, | ||||
|       showMap: false, | ||||
|       map: null, | ||||
|       placeSearch: null, | ||||
|       placeDetail: {}, | ||||
|       searchPlace: "", | ||||
|       dialogForm: {}, | ||||
|       tableData: [], | ||||
|       search: { | ||||
|         name: "" | ||||
|       }, | ||||
|       sysInfo: {}, | ||||
|       sysInfoDialog: false | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     selectMap() { | ||||
|       Object.keys(this.placeDetail).map(e => this.dialogForm[e] = this.placeDetail[e]); | ||||
|       this.showMap = false; | ||||
|     }, | ||||
|     initMap() { | ||||
|       AMapLoader.load({ | ||||
|         key: 'b553334ba34f7ac3cd09df9bc8b539dc', | ||||
|         version: '2.0', | ||||
|         plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'], | ||||
|       }).then(AMap => { | ||||
|         this.map = new AMap.Map('map', { | ||||
|           resizeEnable: true, | ||||
|           zooms: [6, 20], | ||||
|           center: [116.394681, 39.910283], | ||||
|           zoom: 11 | ||||
|         }) | ||||
|         this.placeSearch = new AMap.PlaceSearch({map: this.map}) | ||||
|         new AMap.AutoComplete({ | ||||
|           input: "searchPlaceInput", | ||||
|           output: 'searchPlaceOutput', | ||||
|         }).on('select', e => { | ||||
|           if (e?.poi) { | ||||
|             this.placeSearch.setCity(e.poi.adcode); | ||||
|             this.movePosition(e.poi.location) | ||||
|           } | ||||
|         }) | ||||
|         this.map.on('click', e => { | ||||
|           new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => { | ||||
|             if (res?.regeocode) { | ||||
|               this.placeDetail = { | ||||
|                 lng: e.lnglat?.lng, | ||||
|                 lat: e.lnglat?.lat, | ||||
|                 address: res.regeocode.formattedAddress | ||||
|               } | ||||
|             } | ||||
|           }) | ||||
|           this.movePosition(e.lnglat) | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|     movePosition(center) { | ||||
|       if (this.map) { | ||||
|         this.map.clearMap() | ||||
|         this.map.panTo(center) | ||||
|         this.map.add([ | ||||
|           new AMap.Marker({ | ||||
|             position: center, | ||||
|             clickable: true | ||||
|           }) | ||||
|         ]) | ||||
|         this.map.setFitView() | ||||
|       } | ||||
|     }, | ||||
|     onChange(row) { | ||||
|       this.instance.post(`/app/appdvcpconfig/setStatus`, null, { | ||||
|         params: { | ||||
|           id: row.id, | ||||
|           status: row.status | ||||
|         } | ||||
|       }).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success(+row.status ? '已启用' : '已禁用'); | ||||
|           this.getTableData(); | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     onMiniappStatusChange(row) { | ||||
|       this.instance.post(`/app/appdvcpconfig/setMiniappStatus`, null, { | ||||
|         params: { | ||||
|           id: row.id, | ||||
|           status: row.miniappStatus | ||||
|         } | ||||
|       }).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success(+row.miniappStatus ? '已启用' : '已禁用'); | ||||
|           this.getTableData(); | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     add() { | ||||
|       this.dialogForm = {}; | ||||
|       this.dialog = true; | ||||
|     }, | ||||
|     del(row) { | ||||
|       this.$confirm("是否要删除?").then(_ => { | ||||
|         this.instance.post("/app/appdvcpconfig/delete", null, { | ||||
|           params: { | ||||
|             ids: row.id | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success("删除成功"); | ||||
|             this.dialog = false; | ||||
|             this.getTableData(); | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|     detail(row) { | ||||
|       this.instance.post("/app/appdvcpconfig/detail", null, { | ||||
|         params: { | ||||
|           id: row.id | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res && res.data) { | ||||
|           this.dialogForm = {...res.data}; | ||||
|           this.dialog = true; | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getTableData() { | ||||
|       this.instance.post("/app/appdvcpconfig/list", null, { | ||||
|         params: {...this.page, ...this.search} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     confirm() { | ||||
|       this.$refs["form"].validate(valid => { | ||||
|         if (valid) { | ||||
|           this.instance.post("/app/appdvcpconfig/addOrUpdate", { | ||||
|             ...this.dialogForm, | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success(this.dialogForm.id ? "修改成功" : "新增成功"); | ||||
|               this.dialog = false; | ||||
|               this.getTableData(); | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleSystemInfo(id) { | ||||
|       this.sysInfoDialog = true | ||||
|       this.getSystemInfo(id) | ||||
|     }, | ||||
|     getSystemInfo(id) { | ||||
|       this.instance.post("/app/appdvcpconfig/getSystemInfo", null, { | ||||
|         params: {id} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.sysInfo = JSON.parse(res.data) | ||||
|           this.sysInfo.id = id | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     submitSystemInfo() { | ||||
|       let {id} = this.sysInfo | ||||
|       this.instance.post("/app/appdvcpconfig/updateSystemInfo", this.sysInfo, {params: {id}}).then(res => { | ||||
|         if (res?.code == 0) { | ||||
|           this.$message.success("提交成功!") | ||||
|           this.sysInfoDialog = false | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handlePush(id) { | ||||
|       this.instance.post("/app/appclapeventinfo/setAppWorkbench", null, {params: {id}}).then(res => { | ||||
|         if (res?.code == 0) { | ||||
|           this.$message.success("推送成功!") | ||||
|         } | ||||
|       }) | ||||
|     currentPage() { | ||||
|       const {hash} = this.$route | ||||
|       return hash == "#theme" ? ThemeSetting : List | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.dict.load("integralRuleStatus").then(this.getTableData); | ||||
|     this.dict.load("yesOrNo", "themeWeb", 'themeMp', "themeWxwork") | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AppQyWxConfig { | ||||
|   height: 100%; | ||||
|  | ||||
|  | ||||
|   ::v-deep .mapDialog { | ||||
|     .el-dialog__body { | ||||
|       padding: 0; | ||||
|  | ||||
|       .ai-dialog__content { | ||||
|         padding: 0; | ||||
|       } | ||||
|  | ||||
|       .ai-dialog__content--wrapper { | ||||
|         padding: 0 !important; | ||||
|         position: relative; | ||||
|       } | ||||
|  | ||||
|       #map { | ||||
|         width: 100%; | ||||
|         height: 500px; | ||||
|       } | ||||
|  | ||||
|       .searchPlaceInput { | ||||
|         position: absolute; | ||||
|         width: 250px; | ||||
|         top: 30px; | ||||
|         left: 25px; | ||||
|       } | ||||
|  | ||||
|       #searchPlaceOutput { | ||||
|         position: absolute; | ||||
|         width: 250px; | ||||
|         left: 25px; | ||||
|         height: initial; | ||||
|         top: 80px; | ||||
|         background: white; | ||||
|         z-index: 250; | ||||
|         max-height: 300px; | ||||
|         overflow-y: auto; | ||||
|  | ||||
|         .auto-item { | ||||
|           text-align: left; | ||||
|           font-size: 14px; | ||||
|           padding: 8px; | ||||
|           box-sizing: border-box; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|     } | ||||
|   } | ||||
|  | ||||
| } | ||||
| </style> | ||||
|   | ||||
							
								
								
									
										74
									
								
								core/apps/AppQyWxConfig/components/AiSelectCard.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										74
									
								
								core/apps/AppQyWxConfig/components/AiSelectCard.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,74 @@ | ||||
| <template> | ||||
|   <section class="AiSelectCard" flex> | ||||
|     <div class="checkCard" v-for="op in list" :key="op[props.value]" :class="{checked:op.dictValue==value}"> | ||||
|       <el-image :src="op.thumb"/> | ||||
|       <el-row type="flex" class="bottomPane"> | ||||
|         <b class="label fill" v-text="op[props.label]"/> | ||||
|         <el-button type="text" @click.stop="$emit('change',op[props.value])">使用</el-button> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "AiSelectCard", | ||||
|   model: { | ||||
|     prop: "value", | ||||
|     event: "change" | ||||
|   }, | ||||
|   props: { | ||||
|     value: {default: ""}, | ||||
|     ops: {default: () => []}, | ||||
|     type: {default: "web"}, | ||||
|     dict: String, | ||||
|     prop: {default: () => ({})} | ||||
|   }, | ||||
|   computed: { | ||||
|     list: v => (v.dict ? v.$dict.getDict(v.dict) : v.ops || []).map(e => ({ | ||||
|       ...e, | ||||
|       thumb: `https://cdn.cunwuyun.cn/theme/thumb/${v.type}_${e[v.props.value]}.png` | ||||
|     })), | ||||
|     props: v => ({value: 'dictValue', label: 'dictName', ...v.prop}) | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AiSelectCard { | ||||
|   display: flex; | ||||
|   flex-wrap: wrap; | ||||
|   gap: 16px; | ||||
|  | ||||
|   .checkCard { | ||||
|     width: 360px; | ||||
|     background: #fff; | ||||
|     border-radius: 8px; | ||||
|     overflow: hidden; | ||||
|     position: relative; | ||||
|  | ||||
|     .label { | ||||
|       user-select: none; | ||||
|     } | ||||
|  | ||||
|     &.checked:before { | ||||
|       position: absolute; | ||||
|       content: "应用中"; | ||||
|       top: 16px; | ||||
|       left: 16px; | ||||
|       z-index: 9; | ||||
|       padding: 8px 16px; | ||||
|       background: rgba(#000, .7); | ||||
|       color: #fff; | ||||
|       border-radius: 8px; | ||||
|     } | ||||
|  | ||||
|     .bottomPane { | ||||
|       height: 48px; | ||||
|       align-items: center; | ||||
|       padding: 0 16px; | ||||
|       border-top: 1px solid #eee; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										481
									
								
								core/apps/AppQyWxConfig/list.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										481
									
								
								core/apps/AppQyWxConfig/list.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,481 @@ | ||||
| <template> | ||||
|   <section class="list"> | ||||
|     <ai-list> | ||||
|       <ai-title slot="title" title="企业微信配置" isShowBottomBorder/> | ||||
|       <template #content> | ||||
|         <ai-search-bar> | ||||
|           <template #left> | ||||
|             <el-button type="primary" @click="add" icon="iconfont iconAdd">新增</el-button> | ||||
|           </template> | ||||
|           <template #right> | ||||
|             <el-input size="small" placeholder="搜索名称" v-model="search.name" clearable | ||||
|                       @clear="page.current = 1,search.name = '', getTableData()" | ||||
|                       v-throttle="() => {page.current = 1, getTableData()}"/> | ||||
|           </template> | ||||
|         </ai-search-bar> | ||||
|         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" | ||||
|                   @getList="getTableData" :col-configs="colConfigs"> | ||||
|           <el-table-column type="expand" slot="expand"> | ||||
|             <template slot-scope="{row}"> | ||||
|               <ai-wrapper> | ||||
|                 <ai-info-item labelWidth="200px" v-for="op in desConfigs" :key="op.prop" :value="row[op.prop]" | ||||
|                               v-bind="op"/> | ||||
|               </ai-wrapper> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="status" align="center" label="状态" width="150"> | ||||
|             <template v-slot="{ row }"> | ||||
|               <el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" | ||||
|                          active-color="#5088FF" inactive-color="#D0D4DC"></el-switch> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="miniappStatus" align="center" label="小程序状态" width="150"> | ||||
|             <template v-slot="{ row }"> | ||||
|               <el-switch v-model="row.miniappStatus" @change="onMiniappStatusChange(row)" active-value="1" | ||||
|                          inactive-value="0" | ||||
|                          active-color="#5088FF" inactive-color="#D0D4DC"></el-switch> | ||||
|             </template> | ||||
|           </el-table-column> | ||||
|           <el-table-column slot="options" align="center" label="操作" width="400"> | ||||
|             <el-row type="flex" justify="center" align="middle" slot-scope="{row}"> | ||||
|               <el-button type="text" @click="detail(row)">详情</el-button> | ||||
|               <el-button type="text" @click="del(row)">删除</el-button> | ||||
|               <el-button type="text" @click="handleSystemInfo(row.id)">系统信息</el-button> | ||||
|               <el-button type="text" @click="handlePush(row.id)">推送随手拍样式</el-button> | ||||
|               <el-button type="text" @click="handleTheme(row.id)">主题样式</el-button> | ||||
|             </el-row> | ||||
|           </el-table-column> | ||||
|         </ai-table> | ||||
|       </template> | ||||
|     </ai-list> | ||||
|     <ai-dialog title="新增" :visible.sync="dialog" width="800px" @onConfirm="confirm"> | ||||
|       <el-form ref="form" :model="dialogForm" :rules="rules" size="small" label-width="180px"> | ||||
|         <el-form-item required label="名称" prop="name"> | ||||
|           <el-input v-model.trim="dialogForm.name" placeholder="请输入名称" show-word-limit maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信ID" prop="corpId"> | ||||
|           <el-input v-model.trim="dialogForm.corpId" placeholder="请输入企业微信ID" show-word-limit maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信通讯录SECRET" prop="corpAddressBookSecret"> | ||||
|           <el-input v-model.trim="dialogForm.corpAddressBookSecret" placeholder="请输入企业微信通讯录SECRET" show-word-limit | ||||
|                     maxlength="64"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信AESKEY" prop="corpAeskey"> | ||||
|           <el-input v-model.trim="dialogForm.corpAeskey" placeholder="请输入企业微信AESKEY" show-word-limit | ||||
|                     maxlength="64"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信AGENTID" prop="corpAgentId"> | ||||
|           <el-input v-model.trim="dialogForm.corpAgentId" placeholder="请输入企业微信AGENTID" show-word-limit | ||||
|                     maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="随手拍AGENTID" prop="clapAgentId"> | ||||
|           <el-input v-model.trim="dialogForm.clapAgentId" placeholder="请输入随手拍AGENTID" show-word-limit | ||||
|                     maxlength="100"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信SECRET" prop="corpSecret"> | ||||
|           <el-input v-model.trim="dialogForm.corpSecret" placeholder="请输入企业微信SECRET" show-word-limit | ||||
|                     maxlength="255"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企业微信TOKEN" prop="corpToken"> | ||||
|           <el-input v-model.trim="dialogForm.corpToken" placeholder="请输入企业微信TOKEN" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序APPID" prop="miniappAppid"> | ||||
|           <el-input v-model.trim="dialogForm.miniappAppid" placeholder="请输入小程序APPID" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序SECRET" prop="miniappSecret"> | ||||
|           <el-input v-model.trim="dialogForm.miniappSecret" placeholder="请输入小程序SECRET" show-word-limit | ||||
|                     maxlength="32"></el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="企微访问域名" prop="dvcpUrl"> | ||||
|           <el-input v-model.trim="dialogForm.dvcpUrl" placeholder="请输入企微访问域名" show-word-limit maxlength="128"> | ||||
|             <template slot="prepend">Http://</template> | ||||
|           </el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="web访问域名" prop="webUrl"> | ||||
|           <el-input v-model.trim="dialogForm.webUrl" placeholder="请输入web访问域名" show-word-limit maxlength="128"> | ||||
|             <template slot="prepend">Http://</template> | ||||
|           </el-input> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="地区" prop="areaId"> | ||||
|           <ai-area-select :instance="instance" v-model="dialogForm.areaId" alwaysShow | ||||
|                           @name="(e)=>dialogForm.areaName=e"/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="地图中心点" prop="lat"> | ||||
|           <el-button type="primary" icon="iconfont iconAdd" @click="showMap=true">设置地点</el-button> | ||||
|           <div v-if="dialogForm.lat">{{ dialogForm.address }}</div> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="状态" prop="status"> | ||||
|           <el-radio-group v-model.trim="dialogForm.status"> | ||||
|             <el-radio label="1">启用</el-radio> | ||||
|             <el-radio label="0">禁用</el-radio> | ||||
|           </el-radio-group> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="小程序状态" prop="miniappStatus"> | ||||
|           <el-radio-group v-model.trim="dialogForm.miniappStatus"> | ||||
|             <el-radio label="1">启用</el-radio> | ||||
|             <el-radio label="0">禁用</el-radio> | ||||
|           </el-radio-group> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="系统配置信息" prop="systemInfo"> | ||||
|           <el-input type="textarea" :rows="2" placeholder="请输入系统配置信息" v-model="dialogForm.systemInfo" | ||||
|                     maxlength="50000"/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|     <ai-dialog title="地图" :visible.sync="showMap" @opened="initMap" width="800px" class="mapDialog" | ||||
|                @onConfirm="selectMap"> | ||||
|       <div id="map"></div> | ||||
|       <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" | ||||
|                 autocomplete="on" | ||||
|                 @change="placeSearch.search(searchPlace)"> | ||||
|         <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button> | ||||
|       </el-input> | ||||
|       <div id="searchPlaceOutput"/> | ||||
|     </ai-dialog> | ||||
|     <ai-dialog title="系统信息设置" :visible.sync="sysInfoDialog" width="600px" @onConfirm="submitSystemInfo" | ||||
|                @closed="sysInfo={}"> | ||||
|       <el-form size="small" label-width="140px"> | ||||
|         <el-form-item label="页签标题"> | ||||
|           <el-input v-model="sysInfo.title" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="系统标题"> | ||||
|           <el-input v-model="sysInfo.fullTitle" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="logo"> | ||||
|           <el-input v-model="sysInfo.logo" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="登录页左上角标题"> | ||||
|           <el-input v-model="sysInfo.name" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="登录页副标题"> | ||||
|           <el-input type="textarea" rows="5" v-model="sysInfo.desc" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|  | ||||
|         <el-form-item label="版权所有"> | ||||
|           <el-input v-model="sysInfo.recordDesc" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="备案号"> | ||||
|           <el-input v-model="sysInfo.recordNo" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="备案跳转链接"> | ||||
|           <el-input v-model="sysInfo.recordURL" placeholder="请输入..." clearable/> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|     </ai-dialog> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {mapState} from "vuex"; | ||||
| import AMapLoader from "@amap/amap-jsapi-loader" | ||||
|  | ||||
| export default { | ||||
|   name: "list", | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         {slot: 'expand'}, | ||||
|         {prop: "name", label: "名称"}, | ||||
|         {prop: "corpId", label: "企业微信ID", width: 180}, | ||||
|         {slot: "status",}, | ||||
|         {slot: "miniappStatus"}, | ||||
|         {prop: "createTime", label: "创建时间"}, | ||||
|         {slot: "options"}, | ||||
|       ] | ||||
|     }, | ||||
|     desConfigs() { | ||||
|       let isLine = true | ||||
|       return [ | ||||
|         {prop: "corpAddressBookSecret", label: "企业微信通讯录SECRET", width: 200}, | ||||
|         {prop: "corpAgentId", label: "企业微信AGENTID", width: 150}, | ||||
|         {prop: "corpSecret", label: "企业微信SECRET", isLine}, | ||||
|         {prop: "corpToken", label: "企业微信TOKEN", width: 150}, | ||||
|         {prop: "corpAeskey", label: "企业微信AESKEY", width: 150}, | ||||
|         {prop: "miniappAppid", label: "小程序APPID", width: 150}, | ||||
|         {prop: "miniappSecret", label: "小程序SECRET", width: 150}, | ||||
|         {prop: "areaId", label: "地区编码", width: 150, isLine}, | ||||
|         {prop: "lat", label: "纬度", width: 100}, | ||||
|         {prop: "lng", label: "经度", width: 100}, | ||||
|         {prop: "address", label: "中心点", width: 100, isLine}, | ||||
|         {prop: "webUrl", label: "管理端地址", width: 100}, | ||||
|         {prop: "dvcpUrl", label: "企微端地址", width: 100}, | ||||
|       ] | ||||
|     }, | ||||
|     rules() { | ||||
|       return { | ||||
|         name: [{required: true, message: "请填写名称"}], | ||||
|         corpId: [{required: true, message: "请填写企业微信ID"}], | ||||
|         corpAddressBookSecret: [{required: true, message: "请填写企业微信通讯录SECRET"}], | ||||
|         corpAeskey: [{required: true, message: "请填写企业微信AESKEY"}], | ||||
|         corpAgentId: [{required: true, message: "请填写企业微信AGENTID"}], | ||||
|         corpSecret: [{required: true, message: "请填写企业微信SECRET"}], | ||||
|         corpToken: [{required: true, message: "请填写企业微信TOKEN"}], | ||||
|         miniappAppid: [{required: true, message: "请填写小程序APPID"}], | ||||
|         miniappSecret: [{required: true, message: "请填写小程序SECRET"}], | ||||
|         dvcpUrl: [{required: true, message: "请填写企微访问域名"}], | ||||
|         webUrl: [{required: true, message: "请填写web访问域名"}], | ||||
|         status: [{required: true, message: "请选择状态", trigger: "change"}], | ||||
|         miniappStatus: [{required: true, message: "请选择小程序状态", trigger: "change"}], | ||||
|         areaId: [{required: true, message: "请选择地区", trigger: "change"}], | ||||
|         lat: [{required: true, message: "请选择中心点"}], | ||||
|         systemInfo: [{required: true, message: "请输入系统配置信息"}], | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       page: {current: 1, size: 10, total: 0}, | ||||
|       dialog: false, | ||||
|       showMap: false, | ||||
|       map: null, | ||||
|       placeSearch: null, | ||||
|       placeDetail: {}, | ||||
|       searchPlace: "", | ||||
|       dialogForm: {}, | ||||
|       tableData: [], | ||||
|       search: { | ||||
|         name: "" | ||||
|       }, | ||||
|       sysInfo: {}, | ||||
|       sysInfoDialog: false | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     selectMap() { | ||||
|       Object.keys(this.placeDetail).map(e => this.dialogForm[e] = this.placeDetail[e]); | ||||
|       this.showMap = false; | ||||
|     }, | ||||
|     initMap() { | ||||
|       AMapLoader.load({ | ||||
|         key: 'b553334ba34f7ac3cd09df9bc8b539dc', | ||||
|         version: '2.0', | ||||
|         plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'], | ||||
|       }).then(AMap => { | ||||
|         this.map = new AMap.Map('map', { | ||||
|           resizeEnable: true, | ||||
|           zooms: [6, 20], | ||||
|           center: [116.394681, 39.910283], | ||||
|           zoom: 11 | ||||
|         }) | ||||
|         this.placeSearch = new AMap.PlaceSearch({map: this.map}) | ||||
|         new AMap.AutoComplete({ | ||||
|           input: "searchPlaceInput", | ||||
|           output: 'searchPlaceOutput', | ||||
|         }).on('select', e => { | ||||
|           if (e?.poi) { | ||||
|             this.placeSearch.setCity(e.poi.adcode); | ||||
|             this.movePosition(e.poi.location) | ||||
|           } | ||||
|         }) | ||||
|         this.map.on('click', e => { | ||||
|           new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => { | ||||
|             if (res?.regeocode) { | ||||
|               this.placeDetail = { | ||||
|                 lng: e.lnglat?.lng, | ||||
|                 lat: e.lnglat?.lat, | ||||
|                 address: res.regeocode.formattedAddress | ||||
|               } | ||||
|             } | ||||
|           }) | ||||
|           this.movePosition(e.lnglat) | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|     movePosition(center) { | ||||
|       if (this.map) { | ||||
|         this.map.clearMap() | ||||
|         this.map.panTo(center) | ||||
|         this.map.add([ | ||||
|           new AMap.Marker({ | ||||
|             position: center, | ||||
|             clickable: true | ||||
|           }) | ||||
|         ]) | ||||
|         this.map.setFitView() | ||||
|       } | ||||
|     }, | ||||
|     onChange(row) { | ||||
|       this.instance.post(`/app/appdvcpconfig/setStatus`, null, { | ||||
|         params: { | ||||
|           id: row.id, | ||||
|           status: row.status | ||||
|         } | ||||
|       }).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success(+row.status ? '已启用' : '已禁用'); | ||||
|           this.getTableData(); | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     onMiniappStatusChange(row) { | ||||
|       this.instance.post(`/app/appdvcpconfig/setMiniappStatus`, null, { | ||||
|         params: { | ||||
|           id: row.id, | ||||
|           status: row.miniappStatus | ||||
|         } | ||||
|       }).then((res) => { | ||||
|         if (res.code == 0) { | ||||
|           this.$message.success(+row.miniappStatus ? '已启用' : '已禁用'); | ||||
|           this.getTableData(); | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     add() { | ||||
|       this.dialogForm = {}; | ||||
|       this.dialog = true; | ||||
|     }, | ||||
|     del(row) { | ||||
|       this.$confirm("是否要删除?").then(_ => { | ||||
|         this.instance.post("/app/appdvcpconfig/delete", null, { | ||||
|           params: { | ||||
|             ids: row.id | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success("删除成功"); | ||||
|             this.dialog = false; | ||||
|             this.getTableData(); | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|     detail(row) { | ||||
|       this.instance.post("/app/appdvcpconfig/detail", null, { | ||||
|         params: { | ||||
|           id: row.id | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res && res.data) { | ||||
|           this.dialogForm = {...res.data}; | ||||
|           this.dialog = true; | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     getTableData() { | ||||
|       this.instance.post("/app/appdvcpconfig/list", null, { | ||||
|         params: {...this.page, ...this.search} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.tableData = res.data?.records | ||||
|           this.page.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     confirm() { | ||||
|       this.$refs["form"].validate(valid => { | ||||
|         if (valid) { | ||||
|           this.instance.post("/app/appdvcpconfig/addOrUpdate", { | ||||
|             ...this.dialogForm, | ||||
|           }).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success(this.dialogForm.id ? "修改成功" : "新增成功"); | ||||
|               this.dialog = false; | ||||
|               this.getTableData(); | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleSystemInfo(id) { | ||||
|       this.sysInfoDialog = true | ||||
|       this.getSystemInfo(id) | ||||
|     }, | ||||
|     getSystemInfo(id) { | ||||
|       this.instance.post("/app/appdvcpconfig/getSystemInfo", null, { | ||||
|         params: {id} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.sysInfo = JSON.parse(res.data) | ||||
|           this.sysInfo.id = id | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     submitSystemInfo() { | ||||
|       let {id} = this.sysInfo | ||||
|       this.instance.post("/app/appdvcpconfig/updateSystemInfo", this.sysInfo, {params: {id}}).then(res => { | ||||
|         if (res?.code == 0) { | ||||
|           this.$message.success("提交成功!") | ||||
|           this.sysInfoDialog = false | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handlePush(id) { | ||||
|       this.instance.post("/app/appclapeventinfo/setAppWorkbench", null, {params: {id}}).then(res => { | ||||
|         if (res?.code == 0) { | ||||
|           this.$message.success("推送成功!") | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleTheme(id) { | ||||
|       this.$router.push({hash: "#theme", query: {id}}) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.getTableData() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .list { | ||||
|   height: 100%; | ||||
|  | ||||
|  | ||||
|   ::v-deep .mapDialog { | ||||
|     .el-dialog__body { | ||||
|       padding: 0; | ||||
|  | ||||
|       .ai-dialog__content { | ||||
|         padding: 0; | ||||
|       } | ||||
|  | ||||
|       .ai-dialog__content--wrapper { | ||||
|         padding: 0 !important; | ||||
|         position: relative; | ||||
|       } | ||||
|  | ||||
|       #map { | ||||
|         width: 100%; | ||||
|         height: 500px; | ||||
|       } | ||||
|  | ||||
|       .searchPlaceInput { | ||||
|         position: absolute; | ||||
|         width: 250px; | ||||
|         top: 30px; | ||||
|         left: 25px; | ||||
|       } | ||||
|  | ||||
|       #searchPlaceOutput { | ||||
|         position: absolute; | ||||
|         width: 250px; | ||||
|         left: 25px; | ||||
|         height: initial; | ||||
|         top: 80px; | ||||
|         background: white; | ||||
|         z-index: 250; | ||||
|         max-height: 300px; | ||||
|         overflow-y: auto; | ||||
|  | ||||
|         .auto-item { | ||||
|           text-align: left; | ||||
|           font-size: 14px; | ||||
|           padding: 8px; | ||||
|           box-sizing: border-box; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|     } | ||||
|   } | ||||
|  | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										83
									
								
								core/apps/AppQyWxConfig/themeSetting.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										83
									
								
								core/apps/AppQyWxConfig/themeSetting.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,83 @@ | ||||
| <template> | ||||
|   <section class="themeSetting"> | ||||
|     <ai-detail list> | ||||
|       <ai-title slot="title" title="主题样式" isShowBottomBorder isShowBack @back="cancel"> | ||||
|         <template #rightBtn> | ||||
|           <span class="mar-r8" v-text="'灰色滤镜'"/> | ||||
|           <el-switch size="mini" v-model="form.enableGreyFilter" name="灰色滤镜" border active-value="1" inactive-value="0"/> | ||||
|         </template> | ||||
|       </ai-title> | ||||
|       <template #content> | ||||
|         <el-form size="small" :model="form" ref="ThemeForm"> | ||||
|           <ai-title title="WEB后台"/> | ||||
|           <ai-select-card dict="themeWeb" v-model="form.colorScheme.web"/> | ||||
|         </el-form> | ||||
|       </template> | ||||
|       <template #footer> | ||||
|         <el-button @click="cancel">取消</el-button> | ||||
|         <el-button type="primary" @click="submit">提交</el-button> | ||||
|       </template> | ||||
|     </ai-detail> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import AiSelectCard from "./components/AiSelectCard"; | ||||
|  | ||||
| export default { | ||||
|   name: "themeSetting", | ||||
|   components: {AiSelectCard}, | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     permissions: Function | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       form: {enableGreyFilter: '0', colorScheme: {}} | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     getDetail() { | ||||
|       const {id} = this.$route.query | ||||
|       this.instance.post("/app/appdvcpconfig/detail", null, {params: {id}}).then(res => { | ||||
|         if (res?.data) { | ||||
|           let {colorScheme, enableGreyFilter} = res.data | ||||
|           colorScheme = JSON.parse(colorScheme) || {web: 'blue'} | ||||
|           this.form = {colorScheme, enableGreyFilter} | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     cancel() { | ||||
|       this.$router.push({}) | ||||
|     }, | ||||
|     submit() { | ||||
|       this.$refs.ThemeForm.validate(v => { | ||||
|         if (v) { | ||||
|           let {colorScheme} = this.form | ||||
|           colorScheme = JSON.stringify(colorScheme) | ||||
|           this.instance.post("/app/appdvcpconfig/updateSysColorScheme", {...this.form, colorScheme}).then(res => { | ||||
|             if (res?.code == 0) { | ||||
|               this.$message.success("保存成功!") | ||||
|               this.cancel() | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     this.getDetail() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .themeSetting { | ||||
|   height: 100%; | ||||
|  | ||||
|   .mar-r8 { | ||||
|     margin-right: 8px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user