洋浦学校 我的工作台 八大中心 图片管理模块前端开发

src/views/screenAdaptation/pages/adminCenter/servicePlatform/honor/honorList.vue

@@ -328,4 +328,4 @@
             text-align: right;
         }
     }
-</style>
+</style>

src/views/screenAdaptation/pages/adminCenter/servicePlatform/imgTextAdmin/imgAdmin.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="img-text-list-content-style">
+        <template v-if="pageType === 0">
+            <div class="search-and-add-style">
+                <div>
+                    <span style="margin:0 0.5rem">图片分类</span>
+                    <a-select :value="categoryId" @change="categoryChange">
+                        <a-select-option v-for="item in categoryList" :key="item.category_id" :value="item.category_id">
+                            {{ item.category_name }}
+                        </a-select-option>
+                    </a-select>
+                </div>
+                <a-button type="primary" @click="toAdd" class="add-button-style">新增</a-button>
+            </div>
+            <a-table :columns="tableColumn" :data-source="dataList" :loading="loading" :pagination="false" class="imgListTable">
+                <div slot="photo" slot-scope="text, record" class="idPhotoContent">
+                    <Upload :type="2" :multiple="false" :option="{}" :canDownload="false"
+                            :fileData="record.fileList"
+                            :canUpload="false"
+                            ref="fileUpload"
+                    />
+                </div>
+                <span slot="action" slot-scope="text, record">
+                    <a @click="toDelete(record)">删除</a>
+                </span>
+            </a-table>
+            <a-pagination v-if="totalPage > 1" v-model="pageNumber" :pageSize="pageSize" :total="totalNum"
+                          @change="onPageChange"/>
+        </template>
+        <a-modal title="提示"
+                 :visible="visible"
+                 centered
+                 cancelText="取消"
+                 okText="确定"
+                 @ok="handleOk"
+                 @cancel="handleCancel">
+            是否确定删除此条信息？
+        </a-modal>
+        <template v-if="pageType === 1">
+            <PictureInfo :categoryId="categoryId" :pictureId="pictureId" @cancel="cancel"/>
+        </template>
+    </div>
+</template>
+<script>
+    import InterConfig from '../interConfig';
+    import {Table, Button, Select, Modal, Divider, Cascader, Icon, Input,Pagination} from 'ant-design-vue';
+    import PictureInfo from './pictureInfo';
+    import Upload from '../../../../../../components/common/uploader/Upload.vue';
+    const tableColumn = [
+        {
+            dataIndex: 'index',
+            key: 'index',
+            title: '序号',
+            width: "80px",
+            align: "center"
+        },
+        {
+            dataIndex: 'picture_name',
+            key: 'pictureName',
+            title: '图片名称',
+            align: "center"
+        },
+        {
+            dataIndex: 'picture_format',
+            key: 'pictureFormat',
+            title: '图片格式',
+            align: "center"
+        },
+        {
+            dataIndex: 'photo',
+            key: 'photo',
+            title: '图片',
+            align: "center",
+            scopedSlots: {customRender: 'photo'},
+        },
+        {
+            dataIndex: 'create_time',
+            key: 'createTime',
+            title: '创建时间',
+            align: "center"
+        },
+        {
+            title: '操作',
+            key: 'action',
+            align: "center",
+            scopedSlots: {customRender: 'action'},
+        }
+    ]
+    export default{
+        props: ["menuId"],
+        data(){
+            return {
+                pageType: 0,//0 列表页面 1 新增页面
+                categoryId: "",
+                categoryList: [],
+                tableColumn: tableColumn,
+                dataList: [],
+                loading: false,
+                visible: false,
+                pageNumber: 1,
+                pageSize: 3,
+                totalPage: 0,
+                totalNum: 0,
+                pictureId:"",
+            }
+        },
+        created(){
+            this.getPictureCategories();
+        },
+        methods: {
+            getPictureCategories: function () {
+                let param = {
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getPictureCategories.url,
+                    params: param,
+                    method: InterConfig.getPictureCategories.method,
+                    isTestLogin: InterConfig.getPictureCategories.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let categoryList = resData.data;
+                        if(categoryList && categoryList.length > 0){
+                            this.categoryList.push(...categoryList);
+                            this.categoryId = categoryList[0].category_id;
+                            this.getPictureList();
+                        }
+                    }
+                })
+            },
+            search:function () {
+                this.getPictureList();
+            },
+            getPictureList: function () {
+                let param = {
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                    category_id: this.categoryId,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getPictureList.url,
+                    params: param,
+                    method: InterConfig.getPictureList.method,
+                    isTestLogin: InterConfig.getPictureList.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let dataList = resData.data.list;
+                        if (dataList && dataList.length > 0) {
+                            for (let i = 0, len = dataList.length; i < len; i++) {
+                                dataList[i]['index'] = i + 1;
+                                let fileList = [];
+                                let fileJson = dataList[i]['attachment_json'];
+                                if (fileJson && fileJson !== "") {
+                                    fileList.push(fileJson);
+                                }
+                                dataList[i]['fileList'] = fileList;
+                            }
+                        }
+                        this.dataList = dataList;
+                        this.totalNum = resData.data.total_row;
+                        this.totalPage = resData.data.total_page;
+                    }
+                })
+            },
+            onPageChange: function (page) {
+                this.pageNumber = page;
+                this.getPictureList();
+            },
+            categoryChange: function (value) {
+                this.categoryId = value;
+                this.getPictureList();
+            },
+            toAdd: function () {
+                this.pictureId = "";
+                this.pageType = 1;
+            },
+            toEdit: function (record) {
+                this.pageType = 1;
+                this.pictureId = record.picture_id + "";
+            },
+            toDelete: function (record) {
+                this.pictureId = record.picture_id + "";
+                this.visible = true;
+            },
+            cancel: function () {
+                this.pageType = 0;
+                this.getPictureList();
+            },
+            //确定删除
+            handleOk: function () {
+                let param = {
+                    picture_ids: this.pictureId,
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.pictureDelete.url,
+                    params: param,
+                    method: InterConfig.pictureDelete.method,
+                    isTestLogin: InterConfig.pictureDelete.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        Modal.success({
+                            title: "操作成功",
+                            content: "",
+                            centered: true
+                        });
+                        this.handleCancel();
+                        this.getPictureList();
+                    }
+                })
+            },
+            //取消
+            handleCancel: function () {
+                this.pictureId = "";
+                this.visible = false;
+            }
+        },
+        components: {
+            ATable: Table,
+            AButton: Button,
+            ASelect: Select,
+            ASelectOption: Select.Option,
+            AModal: Modal,
+            ADivider: Divider,
+            ACascader: Cascader,
+            AIcon: Icon,
+            AInput: Input,
+            APagination:Pagination,
+            PictureInfo,
+            Upload
+        }
+    }
+</script>
+
+<style scopep lang="scss">
+    .img-text-list-content-style {
+        width: 100%;
+        height: auto;
+        padding: 0.5rem;
+        .search-and-add-style {
+            width: 100%;
+            height: 3.5rem;
+            background-color: white;
+            margin-bottom: 0.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 0.5rem;
+            .ant-select {
+                width: 150px;
+            }
+            .ant-input {
+                width: 150px;
+            }
+            .add-button-style {
+                float: right;
+            }
+        }
+        .imgListTable {
+            .ant-spin-nested-loading{
+                .ant-spin-container{
+                    .ant-table{
+                        .ant-table-content{
+                            .ant-table-body{
+                                .ant-table-tbody{
+                                    .ant-table-row{
+                                        td{
+                                            .idPhotoContent{
+                                                .upload-container-style{
+                                                    display: flex !important;
+                                                    justify-content: center !important;
+                                                    align-items: center !important;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .ant-pagination {
+            margin-top: 0.5rem;
+            text-align: right;
+        }
+    }
+</style>

src/views/screenAdaptation/pages/adminCenter/servicePlatform/imgTextAdmin/pictureInfo.vue

@@ -0,0 +1,274 @@
+<template>
+    <div class="picture-info-content-style">
+        <a-spin :spinning="pageLoading">
+            <div class="add-record-row-style">
+                <div class="li-box li-left"><span class="must-option-style">*</span>图片分类：</div>
+                <div class="li-box li-right">
+                    <a-select :value="categoryid" @change="categoryChange">
+                        <a-select-option v-for="item in categoryList" :key="item.category_id" :value="item.category_id">
+                            {{ item.category_name }}
+                        </a-select-option>
+                    </a-select>
+                </div>
+            </div>
+            <div class="add-record-row-style">
+                <div class="li-box li-left"><span class="must-option-style">*</span>图片：</div>
+                <div class="li-box li-right">
+                    <Upload :type="2" :multiple="multiple" title="点击上传" :option="{}" :canDownload="false"
+                            ref="fileUpload"
+                            :fileData="attachmentListJson"
+                            @uploadComplete="uploadComplete"
+                    />
+                </div>
+            </div>
+            <div class="add-record-row-style button-row-style">
+                <a-button type="primary" class="button-style" @click="submit">
+                    提交
+                </a-button>
+                <a-button class="button-style" @click="cancel">取消</a-button>
+            </div>
+        </a-spin>
+    </div>
+</template>
+<script>
+    import InterConfig from '../interConfig';
+    import {Spin, Button, Cascader, Input, InputNumber, Modal, Select, DatePicker,Icon,TimePicker} from 'ant-design-vue';
+    import Upload from '../../../../../../components/common/uploader/Upload.vue';
+    export default{
+        props:{
+            categoryId:{
+                type:Number,
+                default:0
+            },
+            pictureId:{
+                type:String,
+                default:""
+            }
+        },
+        created(){
+            this.getPictureCategories();
+            if(this.$props.pictureId !== ""){
+                this.getPictureInfo();
+            }
+        },
+        data(){
+            return {
+                multiple:!this.$props.pictureId !== "",
+                categoryid:this.$props.categoryId,
+                categoryList: [],
+                pageLoading:false,
+                attachmentListJson:[],
+            }
+        },
+        methods:{
+            getPictureCategories: function () {
+                let param = {
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getPictureCategories.url,
+                    params: param,
+                    method: InterConfig.getPictureCategories.method,
+                    isTestLogin: InterConfig.getPictureCategories.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let categoryList = resData.data;
+                        if(categoryList && categoryList.length > 0){
+                            this.categoryList.push(...categoryList);
+                        }
+                    }
+                })
+            },
+            categoryChange:function (value) {
+                this.categoryid = value;
+            },
+            uploadComplete:function(file){
+                this.attachmentListJson = file;
+            },
+            getPictureInfo:function(){
+                let param = {
+                    picture_id:this.$props.pictureId
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.getPictureView.url,
+                    params: param,
+                    method: InterConfig.getPictureView.method,
+                    isTestLogin: InterConfig.getPictureView.isTestLogin,
+                }], (result) => {
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        let info = resData.data;
+                        this.categoryid = info.category_id;
+                        let attachmentJson = info.attachment_json;
+                        this.attachmentListJson.push(attachmentJson);
+                        console.log("attachmentListJson:",this.attachmentListJson)
+                    }
+                })
+            },
+            submit:function () {
+                if(this.categoryid === ""){
+                    Modal.warning({
+                        title: "请选择图片分类",
+                        content: "",
+                        centered: true
+                    })
+                }
+                if(this.attachmentListJson.length === 0){
+                    Modal.warning({
+                        title: "请选择图片",
+                        content: "",
+                        centered: true
+                    })
+                }
+                let param = {
+                    category_id: this.categoryid,
+                    attachment_list_json: JSON.stringify(this.attachmentListJson),
+                    person_id: this.BaseConfig.userInfo.person_id,
+                    identity_id: this.BaseConfig.userInfo.identity_id,
+                    bureau_id: this.BaseConfig.person_info_my.bureau_id,
+                }
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.pictureSave.url,
+                    params: param,
+                    method: InterConfig.pictureSave.method,
+                    isTestLogin: InterConfig.pictureSave.isTestLogin,
+                }], (result) => {
+                    this.pageLoading = false;
+                    let resData = result[0].data;
+                    if (resData.code === 2000) {
+                        Modal.success({
+                            title: "操作成功",
+                            content: "",
+                            centered: true
+                        });
+                        this.cancel();
+                    }
+                })
+
+            },
+            cancel:function () {
+                this.$emit("cancel");
+            }
+        },
+        components:{
+            ASpin:Spin,
+            ASelect: Select,
+            ASelectOption: Select.Option,
+            Upload,
+            AButton:Button,
+            Modal
+        }
+    }
+</script>
+<style scoped lang="scss">
+    .picture-info-content-style {
+        width: 100%;
+        height: auto;
+        font-size: 1rem;
+        color: black;
+        .add-record-row-style {
+            width: 50%;
+            min-height: 3rem;
+            margin: 0.5rem auto;
+            display: flex;
+            .li-box {
+                min-height: 3rem;
+                line-height: 3rem;
+                .must-option-style {
+                    color: red;
+                    margin-right: 0.2rem;
+                }
+            }
+            .li-left {
+                width: 15%;
+                text-align: right;
+            }
+            .li-right {
+                width: 85%;
+                .person-list-content-style {
+                    width: 700px;
+                    height: 500px;
+                    background-color: #ebebeb;
+                    .list-content-style {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        flex-wrap: wrap;
+                        .honor-person-info {
+                            width: auto;
+                            height: 180px;
+                            border: 1px solid #31a8fa;
+                            margin: 0.5rem 0 0 0.5rem;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            .person-name {
+                                width: 100%;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                text-align: center;
+                            }
+                            /deep/ .img-style {
+                                margin-right: 0 !important;
+                            }
+                        }
+                    }
+                }
+                .ant-select {
+                    width: 150px;
+                }
+                .no-border-input-style {
+                    border-top: 0 !important;
+                    border-left: 0 !important;
+                    border-right: 0 !important;
+                }
+                .photo-container-style {
+                    display: flex;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: center;
+                    justify-items: center;
+                    width: 120px !important;
+                    border: 1px solid #e5e5e5;
+                    height: 160px;
+                    background-color: white;
+                    position: relative;
+                    .operate-class {
+                        position: absolute;
+                        bottom: 0.1rem;
+                        color: #31a8fa;
+                        font-size: 1rem;
+                        cursor: pointer;
+                        display: none;
+                    }
+                    .photo-size-style {
+                        display: flex;
+                        align-items: center;
+                        align-content: center;
+                        justify-items: center;
+                        justify-content: center;
+                    }
+                }
+                .edit-style {
+                    &:hover {
+                        .operate-class {
+                            display: inline-block;
+                        }
+                    }
+                }
+            }
+        }
+        .button-row-style {
+            width: 50%;
+            margin: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .button-style {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+</style>

src/views/screenAdaptation/pages/adminCenter/servicePlatform/interConfig.js

@@ -84,6 +84,75 @@ const InterfaceConfig = {
         isTestLogin: true,
     },
 
+
+    /*
+   * 图片分类列表-不分页
+   * "bureau_id":"必填 int 机构id"
+   * */
+    'getPictureCategories': {
+        url: 'intellioa/center/picture/categories',
+        method: 'get',
+        isTestLogin: true,
+    },
+    /*
+    根据分类获取图片列表-分页
+    "bureau_id":"必填 int 机构id"
+    "category_id":"必填 int 分类id
+    "page_number":"非必填 number 【当前页码】"
+    "page_size":"非必填 number 【每页条数】"
+     * */
+    'getPictureList': {
+        url: 'intellioa/center/picture/list',
+        method: 'get',
+        isTestLogin: true,
+    },
+    /*
+    查看图片信息
+    "picture_id": "必填 number【图片信息id】"
+     * */
+    'getPictureView': {
+        url: 'intellioa/center/picture/view',
+        method: 'get',
+        isTestLogin: true,
+    },
+    /*
+    新增图片信息（批量选择图片，保存为多个条目）
+    "category_id"："分类id，number，必填"
+    "attachment_list_json":"必填 附件对象 对象列表属性，需要JSON.stringify转成json字符串再传，使用以下属性"
+    ｜ [{
+    ｜         "guid": "C6E451C1-AA32-0E3F-3E37-94BE1A544797",
+    ｜         "url_code": "room2.jpg",
+    ｜         "name": "room2.jpg",
+    ｜         "file_id": "C6E451C1-AA32-0E3F-3E37-94BE1A544797",
+    ｜         "resource_format": "jpg",
+    ｜         "resource_title": "room2.jpg",
+    ｜         "resource_type_name": "图片",
+    ｜         "resource_id_int": "210018190",
+    ｜         "id": "o_1fj58vlu1p2e3e91ns31t1k1n7am",
+    ｜         "resource_info_id": "210018578"
+    ｜ }]
+    ｜
+    "person_id":"必填 int 操作人ID"
+    "identity_id":"必填 int 操作人身份ID"
+    "bureau_id":"必填 int 机构ID"
+     * */
+    'pictureSave': {
+        url: 'intellioa/center/picture/save',
+        method: 'post',
+        isTestLogin: true,
+    },
+    /*
+       查看图片信息
+       "picture_id": "必填 number【图片信息id】"
+        * */
+    'pictureDelete': {
+        url: 'intellioa/center/picture/delete',
+        method: 'post',
+        isTestLogin: true,
+    },
+
+
+
     /*
      * 值班人员信息列表-分页
      * "bureau_id":"必填 int 机构id"

src/views/screenAdaptation/pages/adminCenter/servicePlatform/moralEducation/teacherMeeting.vue

@@ -127,11 +127,7 @@
                 return triggerNode => triggerNode.parentNode;
             },
             onChange(value, dateString) {
-                if (dateString === "") {
-                    this.punishDate = null;
-                } else {
-                    this.punishDate = moment(dateString).format("YYYY-MM-DD");
-                }
+                this.meetingDate = dateString;
             },
             search:function () {
                 this.getMeetingList();
@@ -146,6 +142,7 @@
                     page_number: this.pageNumber,
                     page_size: this.pageSize,
                 }
+                console.log(param)
                 this.InterfaceConfig.callInterface([{
                     url: InterConfig.getMeetingList.url,
                     params: param,
@@ -293,4 +290,4 @@
             text-align: right;
         }
     }
-</style>
+</style>

src/views/screenAdaptation/pages/adminCenter/systemConfig.js

@@ -270,5 +270,19 @@ export const systemCenterConfig = [
                 ]
             },
         ]
-    }
+    },
+    {
+        id:'imgText',
+        title:'图文管理',
+        menus:[
+            {
+                id:"1",
+                title:"图片管理",
+                path:'/workBench/servicePlatform/imgTextAdmin/:id/:name/:menuId',
+                name:'imgTextAdmin',
+                component:() => import("./servicePlatform/imgTextAdmin/imgAdmin.vue"),
+                props:true,
+            },
+        ]
+    },
 ]