备忘录功能开发

src/views/platform/bpmn/memorandum/index.vue

@@ -0,0 +1,442 @@
+<template>
+    <div class="new-process">
+        <van-sticky>
+            <van-nav-bar
+                :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
+                :left-text="$t('common.button.back')"
+                left-arrow
+                @click-left="$router.push({ name: 'dashboard' })"
+            />
+            <!-- 已关闭，未关闭 -->
+            <van-tabs v-model="tabActive" color="#3396FB" @click="onClickTab">
+                <van-tab v-for="data in tabDatas" :key="data.name" :name="data.name" :title="data.title" />
+            </van-tabs>
+            <van-search v-model="subject" placeholder="请输入搜索关键词" @search="onSearch">
+                <template #action>
+                    <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
+                </template>
+            </van-search>
+        </van-sticky>
+        <van-pull-refresh v-model="refreshing" class="vanPullRefresh" @refresh="onRefresh">
+            <van-list v-model="loading" :finished="finished" @load="loadData">
+                <van-swipe-cell v-for="(item,index) in listData" :key="index" :right-width="65">
+                    <van-cell
+                        :key="index"
+                        :title="item.title_"
+                        @click="onEdit(item,index)"
+                    >
+                        <template slot="icon">
+                            <ibps-avatar
+                                :icon="_randomIcon(5)"
+                                :text="item.name"
+                                :bg-color="_randomColor(1)"
+                                icon-prefix="new-process_size ibps-icon"
+                                class="ibps-mr-10"
+                            />
+                        </template>
+                        <template slot="label">
+                            <div class="content">{{ item.content_ }}</div>
+                        </template>
+                        <span>{{ item.create_time_|formatRelativeTime }}</span>
+                        <div>
+                            <van-tag v-if="tabActive===0" type="primary" size="medium" @click.stop="onClose(item,index)">关闭</van-tag>
+                            <van-tag v-else color="#ccc" plain size="medium">已关闭</van-tag>
+                        </div>
+                    </van-cell>
+                </van-swipe-cell>
+                <!-- <ibps-list-result-page :result-type="resultType" :error-type="errorType" :result-message="resultMessage" /> -->
+            </van-list>
+            <van-divider v-if="footText">到底了~</van-divider>
+            <van-empty v-if="noData" description="暂无数据" />
+        </van-pull-refresh>
+        <!-- 添加按钮 -->
+        <div v-if="tabActive===0" class="ibps-list-footer"><van-button type="info" class="addBtn" @click="addData()">添加</van-button></div>
+        <!-- 添加弹窗 -->
+        <van-popup v-model="addShow" position="bottom" :style="{ height: '40%' }" closeable close-icon-position="top-right">
+            <van-form class="mainForm" @submit="onSubmit">
+                <van-field
+                    v-model="ruleForm.title_"
+                    label-width="70"
+                    :disabled="shiFouEdit"
+                    name="标题"
+                    label="标题"
+                    placeholder="请填写标题"
+                    :rules="[{ required: true, message: '请填写标题' }]"
+                />
+                <van-field
+                    v-model="ruleForm.content_"
+                    class="contentStyle"
+                    type="textarea"
+                    label-width="70"
+                    :disabled="shiFouEdit"
+                    name="内容"
+                    label="内容"
+                    placeholder="请填写内容"
+                    :rules="[{ required: true, message: '请填写内容' }]"
+                />
+                <div v-if="!shiFouEdit" class="footBtn">
+                    <van-button type="info" native-type="submit" class="btn1">保存</van-button>
+                    <van-button type="default" class="btn2" @click="addShow=false">关闭</van-button>
+                </div></van-form>
+        </van-popup>
+
+        <ibps-bpmn-formrender-dialog
+            :visible="formrenderVisible"
+            :title="formrenderTitle"
+            :def-id="defId"
+            @close="visible => formrenderVisible = visible"
+        />
+    </div>
+</template>
+<script>
+import { newProcess, favorited, saveFavorites, removeFavorites } from '@/api/platform/office/bpmInitiated'
+
+import ActionUtils from '@/utils/action'
+import i18n from '@/utils/i18n'
+import random from '@/mixins/random'
+import bpmnStatus from '@/mixins/bpmnStatus'
+import IbpsToolbar from '@/components/ibps-toolbar'
+
+// import IbpsMoreSearch from '@/components/ibps-more-search'
+import IbpsAvatar from '@/components/ibps-avatar'
+import IbpsListResultPage from '@/components/ibps-list-result-page'
+import IbpsTypeTree from '@/business/platform/cat/type/tree'
+import IbpsBpmnFormrenderDialog from '@/business/platform/bpmn/form/dialog'
+import { Notify, Dialog } from 'vant'
+import Template from '../../../../business/platform/data/data-template/template.vue'
+export default {
+    name: 'new-process',
+    components: {
+        // IbpsMoreSearch,
+        IbpsTypeTree,
+        IbpsAvatar,
+        IbpsListResultPage,
+        IbpsBpmnFormrenderDialog,
+        IbpsToolbar
+    },
+    mixins: [random, bpmnStatus],
+    data() {
+        const userId = this.$store.getters.userId
+        return {
+            ruleForm: {
+                title_: '',
+                content_: '',
+                state_: '未关闭',
+                user_Id_: userId
+
+            },
+            editFrom: {},
+            addShow: false,
+            tabActive: 0,
+            tabDatas: [{
+                name: 0,
+                title: '未关闭'
+            }, {
+                name: 1,
+                title: '已关闭'
+            }],
+            current: 0,
+            footText: false,
+            noData: false,
+            editOrAdd: false,
+            shiFouEdit: false,
+            stateActive: false,
+            moreSearchPopup: false,
+            typeTreePopup: false,
+            searchForms: {
+                forms: [
+                    { prop: 'Q^name_^SL', label: '流程名称', fieldType: 'text' }
+                ]
+            },
+            subject: '',
+            typeId: '',
+            moreParams: {},
+
+            listData: [],
+            pagination: {},
+            sorts: {},
+
+            loading: false,
+            finished: false,
+            refreshing: false,
+            resultType: 'init',
+            errorType: null,
+            resultMessage: null,
+
+            defId: '',
+            formrenderVisible: false,
+            formrenderTitle: ''
+        }
+    },
+
+    created() {
+        this.loadData()
+    },
+
+    methods: {
+        addData() {
+            this.shiFouEdit = false
+            this.addShow = true
+            this.ruleForm.title_ = ''
+            this.ruleForm.content_ = ''
+        },
+        onSubmit(values) {
+            if (!this.editOrAdd) {
+                const params = {
+                    tableName: 't_notes',
+                    paramWhere: [this.ruleForm]
+                }
+                this.$common.request('add', params).then(() => {
+                    Notify({ type: 'primary', message: '添加成功' })
+                    this.addShow = false
+                    this.onSearch()
+                }).catch(e => {
+                    console.log(e)
+                })
+            } else {
+                const editData = this.editFrom
+                const params = { title_: this.ruleForm.title_, content_: this.ruleForm.content_ }
+                const updateParams = {
+                    tableName: 't_notes',
+                    updList: [
+                        {
+                            where: {
+                                id_: editData.id_
+                            },
+                            param: params
+                        }
+                    ]
+                }
+                this.$common.request('update', updateParams).then(() => {
+                    Notify({ type: 'primary', message: '编辑成功' })
+                    this.addShow = false
+                    this.editOrAdd = false
+                    this.onSearch()
+                })
+            }
+        },
+        onEdit(item) {
+            this.editOrAdd = true
+            this.addShow = true
+            this.editFrom = item
+            this.ruleForm.title_ = item.title_
+            this.ruleForm.content_ = item.content_
+            if (this.tabActive === 0) {
+                this.shiFouEdit = false
+            } else {
+                this.shiFouEdit = true
+            }
+        },
+        // 点击关闭
+        onClose(item) {
+            Dialog.alert({
+                title: '提示',
+                message: `确定要关闭标题为<span style="color:red">${item.title_}</span>备忘信息吗？`,
+                showCancelButton: true
+            }).then(() => {
+                const params = { state_: '已关闭' }
+                const updateParams = {
+                    tableName: 't_notes',
+                    updList: [
+                        {
+                            where: {
+                                id_: item.id_
+                            },
+                            param: params
+                        }
+                    ]
+                }
+                this.$common.request('update', updateParams).then(() => {
+                    Notify({ type: 'primary', message: '关闭成功' })
+                    this.onSearch()
+                })
+            }).catch((e) => {
+                console.log(e)
+            })
+        },
+
+        loadData() {
+            this.loading = true
+            this.noData = false
+            this.footText = false
+            let conState = ''
+            if (this.tabActive === 0) {
+                conState = '未关闭'
+            } else {
+                conState = '已关闭'
+            }
+            let page = 0
+            if (this.current === 0) {
+                page = 0
+            } else {
+                page = this.current * 10
+            }
+            const subject = this.subject
+            const sql = `select * from t_notes where state_='${conState}' AND title_ like '%${subject}%' ORDER BY create_time_ DESC limit ${page},10`
+            this.$common.request('sql', sql).then(res => {
+                const { data = [] } = res.variables || {}
+                // this.listData = data
+                if (data.length === 0) {
+                    if (this.current === 0) {
+                        this.noData = true
+                    } else {
+                        this.footText = true
+                    }
+                    this.finished = true
+                    this.loading = false
+                    this.refreshing = false
+                    return
+                }
+
+                this.listData.push(...data)
+
+                // 判断是否还有更多数据
+                if ((this.listData.length) % 10 !== 0) {
+                    this.footText = true
+                    this.finished = true
+                } else {
+                    this.current++
+                }
+
+                this.loading = false
+                this.refreshing = false
+            }).catch(e => {
+                console.log('e', e)
+            })
+        },
+        generateTitle(name, title) { // generateTitle by vue-i18n
+            return i18n.generateTitle(name, title)
+        },
+        onClickTab(index) {
+        // 清空查询条件
+            this.subject = ''
+            this.typeId = ''
+            this.moreParams = {}
+
+            this.onSearch()
+        },
+        /**
+       * 获取格式化参数
+       */
+        getSearcFormData() {
+            let params = {}
+            if (this.$utils.isNotEmpty(this.subject)) {
+                params['Q^name_^SL'] = this.subject
+            }
+            if (this.$utils.isNotEmpty(this.moreParams)) {
+                params = Object.assign(params, this.moreParams)
+            }
+
+            return ActionUtils.formatParams(
+                params,
+                this.pagination,
+                this.sorts)
+        },
+        onRefresh() {
+            this.footText = false
+            this.noData = false
+            this.refreshing = true
+            this.onSearch()
+        },
+
+        /**
+       * 查询
+       */
+        onSearch() {
+            this.stateActive = false
+            this.current = 0
+            ActionUtils.initListData(this)
+            this.loadData()
+        },
+        /**
+       * 高级查询
+       */
+        onMoreSearch(params) {
+            if (this.$utils.isNotEmpty(this.typeId)) {
+                params['Q^type_id_^SL'] = this.typeId
+            }
+
+            this.moreParams = params
+            this.onSearch()
+            if (this.$utils.isNotEmpty(params)) {
+                this.stateActive = true
+            }
+        },
+        clickMoreSearch() {
+            this.moreSearchPopup = true
+            this.stateActive = false
+        },
+        resetForm() {
+            this.typeId = ''
+        },
+        clickType() {
+            this.typeTreePopup = true
+        },
+        clickTypeNode(data) {
+            this.typeId = data.id
+            this.onMoreSearch({})
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.new-process{
+  .ibps-list-footer{
+    position: fixed;
+    top: 100%;
+    transform: translateY(-100%);
+    width: 100%;
+    border-radius: 1px;
+    .addBtn{
+      width: 100%;
+    }
+  }
+  .vanPullRefresh{
+    margin-bottom: 50px;
+    overflow-y: auto;
+    .content{
+      max-height: 35px;
+      overflow-y: auto;
+    }
+  }
+  .mainForm{
+    padding:15% 2% 5% 2% ;
+  }
+  .contentStyle {
+    max-height: 500px; /* 最大高度 */
+    overflow-y: auto; /* 当内容超过最大高度时显示滚动条  van-cell__value */
+//     ::v-deep .van-field__value{
+//     border: 1px solid #ccc;
+//     padding: 5px;
+//  }
+  // /deep/ .van-cell__value{
+  //   border: 1px solid red($color: #000000);
+  // }
+  }
+  .footBtn{
+    position: fixed;
+    top: 100%;
+    transform: translateY(-120%);
+    width: 100%;
+  }
+  .btn1,.btn2{
+    width: 46%;
+    border-radius: 5px;
+  }
+  .btn2{
+    margin: 0 4%;
+  }
+}
+
+  .new-process_size {
+    font-size: 14px !important;
+  }
+
+  ::v-deep .van-cell__title {
+    width: 65%;
+
+    .van-cell__label {
+      overflow-wrap: break-word;
+    }
+  }
+</style>