axwen-test31 2.0.0

package/src/views/template/template-activity/branch.vue

@@ -0,0 +1,682 @@
+<template>
+    <div class="template-activity template-wrapper">
+        <yt-search-table
+            ref="table"
+            :api="api"
+            :fields="fields"
+            :tableExtend="{ exportName: '分行模板', exportAuth: 'template-activity-branch__export', beforeSearch, hasExport: false }"
+        >
+        <div class="flex-between" slot="btn">
+            <span class="font-bold">分行模板列表</span>
+            <yt-button
+                type="primary"
+                v-if="profile.orgLevel !== 1"
+                icon="el-icon-plus"
+                @click="handleAdd">新建
+            </yt-button>
+        </div>
+        </yt-search-table>
+        <yt-dialog-form
+            ref="dialog"
+            name="营销活动分行模板"
+            :isDefaultShow="false"
+            :fields="fields"
+            :updateApi="updateApi"/>
+
+        <!-- 保存为场景库 -->
+        <yt-dialog-form
+            width="800"
+            ref="dialog-save-scene"
+            :defaultTitle="defaultTitle"
+            :isDefaultShow="true"
+            :dialogExtend="{ showFooter: false,width:'600px' }"
+            :fields="fieldsSaveScene"
+            :beforeSubmit="beforeSubmit">
+            <div class="flex flex-row-reverse gap-2 mt-2">
+                <yt-button
+                    type="primary"
+                    :loading="formBtnLoading"
+                    @click="handleSubmitScene"
+                    >确定
+                </yt-button>
+                <yt-button @click="handleClose">取消</yt-button>
+            </div>
+        </yt-dialog-form>
+        <activity-import-dialog ref="import" title="导入模板" @on-close="handleCloseImport"></activity-import-dialog>
+    </div>
+</template>
+
+<script>
+import { listFhByPage, update, changeState, deleteById ,actSceneManageDetails, shareOrg } from '@/api/template/template-active'
+import { mapState } from 'vuex'
+import { listToMap } from '@/utils/xml'
+import { getApproveDisagreeByPage } from '@/api/oa'
+import {
+    TEMP_STATE_USELSS,
+    TEMP_STATE_ON,
+    TEMP_STATE_OFF,
+    OA_STATE_DRAFT,
+    OA_STATE_WAIT,
+    OA_STATE_PASS,
+    OA_STATE_UNPASS
+} from '@/utils/variable'
+import {sceneTree } from "@/api/scene"; // 场景树结构
+import {getOrgList} from '@/api/system'; // 所有机构
+import CustomerEditorOrg from '@/views/customer/customer-editor-org'
+import ActivityImportDialog from '@/views/market/components/activity-import-dialog'
+
+let btnMap = {
+    update: {
+        label: '修改',
+        auth: 'template-activity-branch__update',
+        confirm: false,
+        onClick (btnConfig, row) {
+            this.handleUpdate(row)
+        }
+    },
+    detail: {
+        label: '详情',
+        auth: 'template-activity-branch__view',
+        confirm: false,
+        onClick (btnConfig, row) {
+            this.handleDetail(row)
+        }
+    },
+    delete: {
+        label: '删除',
+        auth: 'template-activity-branch__delete',
+        confirm: true,
+        onClick (btnConfig, row) {
+            this.handleDelete(row)
+        }
+    },
+    share:{
+        label: '分享',
+        auth: 'template-activity-branch__share',
+        confirm: false,
+        onClick (btnConfig, row) {
+            this.handleShare(row)
+        }
+    },
+    apply:{
+        label: '应用',
+        auth: 'template-activity-branch__apply',
+        confirm: false,
+        onClick (btnConfig, row) {
+            this.handleApply(row)
+        }
+    },
+    saveTempleate:{
+        label: '保存为场景库',
+        auth: 'template-activity-branch__save_templete',
+        confirm: false,
+        onClick (btnConfig, row) {
+            this.handleSaveToTemplate(row)
+        }
+    },
+}
+
+export default {
+    components: { ActivityImportDialog },
+    data () {
+        return {
+            prefix: 'activity.branch.',
+            api: listFhByPage,
+            updateApi: update,
+            fields: [
+                {
+                    title: '模板名称',
+                    key: 'actName',
+                    type: 'input',
+                    search: { order: 4 },
+                    table: {
+                        tooltip: true
+                    },
+                    dialog: { isRequired: true, order: 4 }
+                },
+                {
+                    title: '启停用标志',
+                    key: 'tempStatus',
+                    optionsKey: 'bigsales.TEMP_STATE',
+                    options: [],
+                    table: {
+                        width:110,
+                        isFilter: true,
+                        'filter-multiple': false,
+                        render: (h, { row }, { options }) => {
+                            let isSelf
+                            if (this.orgOrIsself === '1') {
+                                let changeId = this.profile.positionId
+                                isSelf = changeId === row.createUser
+                            } else {
+                                let changeId = this.profile.orgId
+                                isSelf = changeId === row.actInitiatorOrg
+                            }
+                            // 只有审批通过了的才可以启用/停用
+                            let passed = row.oaStatus === OA_STATE_PASS
+                            // 判断是否是本人创建
+                            let isCreated = this.profile.userName === row.crtBy
+                            let map = listToMap(options)
+                            let auth = this.authList.includes('template-activity-branch__state')
+                            if (row.tempStatus === TEMP_STATE_ON || row.tempStatus === TEMP_STATE_OFF) {
+                                return <yt-switch
+                                    vModel={row.tempStatus}
+                                    size="small"
+                                    true-value={TEMP_STATE_ON}
+                                    false-value={TEMP_STATE_OFF}
+                                    before-change={ () => this.handleStatus(row) }
+                                    disabled={!auth || !passed || !isCreated}
+                                    title={passed ? '启用/停用' : '你没有该权限'}
+                                >
+                                </yt-switch>
+                            } else {
+                                return <span>{ map[TEMP_STATE_USELSS] }</span>
+                            }
+                        }
+                    }
+                },
+                {
+                    title: '审批状态',
+                    key: 'oaStatus',
+                    type: 'select',
+                    optionsKey: 'bigsales.TEMPLATE_OA_STATE',
+                    options: [],
+                    table: {
+                        width:120,
+                        isFilter: true,
+                        'filter-multiple': false,
+                        render: (h, { row }, { options }) => {
+                            let objMap = listToMap(options)
+                            let status = row.oaStatus !== OA_STATE_UNPASS
+                                ? <span>{ objMap[row.oaStatus] }</span>
+                                : <yt-button type="text" size="medium" onClick={ () => this.showReason(row) }>{ objMap[row.oaStatus] }</yt-button>
+                            return status
+                        }
+                    },
+                    isShow: false
+                },
+                {
+                    title: '是否分享',
+                    key: 'orgStatus',
+                    table: {
+                        width:120,
+                        isFilter: true,
+                        render: (h, { row }, { options }) => {
+                            let status = row.orgCodes.length === 0
+                                ? <span>{ '否' }</span>
+                                : <span>{ '是' }</span>
+                            return status
+                        }
+                    }
+                },
+                {
+                    title: '分享机构',
+                    key: 'orgCodes',
+                    options: [],
+                    table: {
+                        width:120,
+                        render:(h, { row },{ options })=>{
+                            let str = []
+                            row.orgCodes.forEach(e=>{
+                                str.push(options.find(x=>x.value === e)?.label)
+                            })
+                            return <span>{str.length>0?str.join(','):''}</span>
+                        },
+                        "show-overflow-tooltip": true
+                    }
+                },
+                {
+                    title: '创建时间',
+                    key: 'crtTm',
+                    table: {
+                        tooltip: true
+                    }
+                },
+                {
+                    title: '创建日期',
+                    type: 'daterange',
+                    key: 'beginEndDate',
+                    table: { isShow: false },
+                    search: { defaultValue: null, order: 1 }
+                },
+                {
+                    title: '创建人',
+                    key: 'crtBy',
+                    type: 'creator-select',
+                    options: [],
+                    dialog: { type: 'text', order: 1 },
+                    table: {
+                        render: (h, { row }) => <span class="ellipsis">{row.crtByName}({row.crtBy})</span>,
+                        "show-overflow-tooltip": true
+                    },
+                    search: {
+                        key:'actInitiatorList',
+                        order: 8,
+                    }
+                },
+                {
+                    title: '创建机构',
+                    key: 'crtOrgName',
+                    type: 'org',
+                    search: {
+                        order: 3,
+                        props: {
+                            type: 'user'
+                        },
+                        key: 'searchOrg',
+                        defaultValue: ''
+                    },
+                    table: {
+                        key: 'crtOrgName',
+                        tooltip: true
+                    },
+                    dialog: {
+                        key: 'crtOrgName',
+                        type: 'text',
+                        order: 2
+                    }
+                },
+                {
+                    title: '操作',
+                    table: {
+                        fixed:'right',
+                        width: 240,
+                        render: (h, { row }) => {
+                            // 判断是否是本人创建
+                            let isCreated = this.profile.userName === row.crtBy
+                            let btns = []
+                            btns = ['detail','update','apply','share','delete', 'saveTempleate']
+                            switch (row.oaStatus) {
+                                case OA_STATE_DRAFT: // 草稿
+                                    btns = ['detail', 'update', 'delete', 'share', 'saveTempleate']
+                                    break
+                                case OA_STATE_WAIT: // 待审批
+                                    btns = ['detail', 'share', 'saveTempleate']
+                                    break
+                                case OA_STATE_PASS: // 审批通过
+                                    btns = ['detail', 'share', 'saveTempleate']
+                                    break
+                                case OA_STATE_UNPASS: // 审批驳回
+                                    btns = ['detail', 'update', 'delete', 'share', 'saveTempleate']
+                                    break
+                                default:
+                                    break
+                            }
+                            if (!isCreated){
+                                // 非本人：详情，应用，分享
+                                btns = btns.filter(btn => ['detail','apply','share'].includes(btn))
+                            }else{
+                                btns = btns.filter(btn => ['detail','update','apply','share','delete'].includes(btn))
+                            }
+                            btns = btns.filter(x=>row.operations.includes(x))
+                            return <yt-ctrl>
+                                {
+                                    ...btns.map(btn => {
+                                        let btnConfig = btnMap[btn]
+                                        return (
+                                            <yt-ctrl-item
+                                                auth={ btnConfig.auth }
+                                                confirm={ btnConfig.confirm }
+                                                tip={ btnConfig.label }
+                                                primary={ row.actName }
+                                                onClick={ () => btnConfig.onClick.call(this, btnConfig, row) }
+                                            >{ btnConfig.label }</yt-ctrl-item>
+                                        )
+                                    })
+                                }
+                            </yt-ctrl>
+                        }
+                    }
+                }
+            ],
+            options:[],
+            shareOrgArr:[],
+            allOrgArr:[], // 所有机构,数据字典翻译
+            checkOrgArr:[], // 选中的机构
+            applyRow:{}, // 应用时选中的行数据 
+            formBtnLoading:false,
+            mode:'add',
+            defaultTitle:''
+        }
+    },
+    computed: {
+        ...mapState(['profile', 'authList', 'orgOrIsself']),
+        fieldsSaveScene(){
+            return [
+                {
+                    title: '场景库名称',
+                    key: 'secneDetailName',
+                    type: 'input',
+                    isShow:()=> Boolean(this.mode === 'add'),
+                    dialog: { isRequired: true, }
+                },
+                {
+                    title: '所在目录',
+                    key: 'scenePkId',
+                    type: 'input',
+                    isShow:() => Boolean(this.mode === 'add'), 
+                    dialog: {
+                        isRequired: true, 
+                        renderContent: (h, item, form)=>{
+                            return (
+                                <div>
+                                    <el-cascader
+                                    style='width:100%'
+                                    vModel={form.scenePkId}
+                                    options={this.options}
+                                    allow-clear
+                                    ></el-cascader>
+                                </div>)
+                        }
+                    }
+
+                },
+                {
+                    title: '分享机构',
+                    key: 'orgCodes',
+                    type: 'select',
+                    dialog: { 
+                        renderContent: (h, item, form)=>{
+                            return (
+                                <div style='width:100%'>
+                                    <CustomerEditorOrg style='width:100%' multiple={true} vModel={form.orgCodes} on-input = {this.onInputOrg}/>
+                                    <div style='margin-top:4px'>
+                                        {
+                                            this.allOrgArr.filter(x=>this.checkOrgArr.includes(x.value)).map(e=>{
+                                                return <span style='background:rgb(248,248,251);margin-right:4px;padding:8px;border-radius:2px;'>
+                                                    {e.label} | <span  on-click={()=>{this.onDeleteOrg(e)}}><el-icon class="el-icon-delete cursor" /></span>
+                                                    </span>
+                                            })
+                                        }
+                                    </div>
+                                </div>)
+                        }
+                    }
+                },
+            ]
+        }
+    },
+    created () {
+        this.init()
+
+        this.initSenceData(); // 场景库树结构数据
+        this.initAllOrg();
+    },
+    methods: {
+        init () {
+            this.$getOptionsForSystemParams(['bigsales.TEMP_STATE', 'bigsales.TEMPLATE_OA_STATE']).then(data => {
+                this.fields[1].options = data[0]
+                this.fields[2].options = data[1]
+            })
+        },
+        initSenceData(){
+            sceneTree({}).then(data => {
+            this.options =  setLabelValue(data.data.filter(x=>x.children && x.children.length>0))
+            })
+
+            function setLabelValue(arr){
+                arr.forEach(e=>{
+                    e.label = e.sceneName;
+                    e.value = e.pkId;
+                    if(e.children && e.children.length> 0){
+                        setLabelValue(e.children);
+                    }
+                })
+
+                return arr;
+            }
+        },
+        initAllOrg(){
+            getOrgList().then(res=>{
+                this.allOrgArr = res.data;
+                this.fields.find(x=>x.key === 'orgCodes').options = this.allOrgArr;
+            })
+        },
+        handleCommand(command) {
+            if(command==='add') this.handleAdd(command)
+            if(command === 'import') this.addImportMarket()
+        },
+        handleAdd (addType){
+            if (sessionStorage.getItem('template-activity-event-base')) {
+                sessionStorage.removeItem('template-activity-event-base')
+            }
+            this.$router.replace({
+                name: 'template/template-activity/event-base',
+                query: {
+                    type: 'template-branch',
+                    title: '分行活动模板编辑',
+                    mode: 'add',
+                    isLoop: this.isLoop,
+                    pageName: 'eventManage',
+                    addType
+                }
+            })
+        },
+        addImportMarket() {
+            this.$refs.import.open()
+        },
+        handleCloseImport(ifGet=false){
+            if(ifGet){
+                this.handleAdd('import')
+            }
+        },
+        beforeSearch (params) { // 条件搜索之前处理数据
+            if (params.search.beginEndDate) {
+                params.search.beginDate = this.$util.formatDate(params.search.beginEndDate[0])
+                params.search.endDate = this.$util.formatDate(params.search.beginEndDate[1])
+            }
+            delete params.search.beginEndDate
+            params.search.scene = '01'
+            params.search.tempType = '2'
+            const { actInitiatorList = [] } = params.search
+           
+            delete params.search.actInitiatorList
+            const crtByPositionList = Array.from(new Set(actInitiatorList.map(e => e.id)))
+            crtByPositionList && (params.search.crtByPositionList = crtByPositionList)
+            return params
+        },
+        handleDelete (row) {
+            deleteById(row.id).then(res => {
+                this.$success(res.errorMsg)
+                this.$refs.table.refresh()
+            })
+        },
+        handleDetail (row) {
+            this.$router.push({
+                name: row.versionNo == 2 ? 'market/event/detail1' : 'market/event/detail-pro',
+                query: {
+                    mode: 'view',
+                    type: 'template-branch',
+                    // url: 'template',
+                    id: row.id,
+                    tempStatus:row.tempStatus
+                }
+            })
+        },
+        handleUpdate (row) {
+            this.$router.replace({
+                name: 'template/template-activity/event-base',
+                query: {
+                    type: 'template-root',
+                    // title: '总行活动模板编辑',
+                    mode: 'update',
+                    isLoop: this.isLoop,
+                    id: row.id,
+                    pageName: 'eventManage',
+                    activeTab: '2',
+                    addType: 'update'
+                }
+            })
+        },
+        handleStatus (row) {
+            let item = this.$util.copy(row)
+            let isOn = item.tempStatus === TEMP_STATE_ON
+            return new Promise((resolve) => {
+                this.$confirm(`您确认要${isOn ? '停用' : '启用'}该模板吗？`, '切换确认', {
+                    type: 'warning',
+                    beforeClose: (action, instance, done) => {
+                        if (action === 'confirm') {
+                            instance.confirmButtonLoading = true
+                            item.tempStatus = isOn ? TEMP_STATE_OFF : TEMP_STATE_ON // 切换状态
+                            changeState(item).then(res => {
+                                this.$success(res.errorMsg)
+                                resolve()
+                            }).finally(() => {
+                                instance.confirmButtonLoading = false
+                                this.$refs.table.refresh()
+                                done()
+                            })
+                        } else {
+                            done()
+                        }
+                    }
+                })
+            })
+        },
+        showReason (row) {
+            let params = {
+                pageSize: 10,
+                pageNum: 1,
+                search: {
+                    busId: row.id,
+                }
+            }
+            getApproveDisagreeByPage(params).then(data => {
+                let row = data.data.list.length ? data.data.list[0] : {}
+                this.$confirm(`${row.approveAbstract || '无'}`, '审批意见', {
+                    confirmButtonText: '关闭',
+                    showCancelButton: false
+                })
+            })
+        },
+        handleConfirm (params) {
+            this.$router.push({
+                name: 'market/event/template/branch/edit1',
+                query: {
+                    mode: 'add',
+                    type: 'template-branch',
+                    title: '分行活动模板编辑',
+                    params: JSON.stringify(params)
+                }
+            })
+        },
+              // 分享
+        handleShare(row){
+            this.mode = 'share'
+            this.defaultTitle='分享'
+            this.checkOrgArr = [];
+            this.applyRow = row;
+            let backUpdData = JSON.parse(JSON.stringify(row))
+            this.checkOrgArr = backUpdData.orgCodes;
+            backUpdData.orgCodes = backUpdData.orgCodes.join(',')
+            this.$refs['dialog-save-scene'].update(backUpdData)
+        },
+        // 应用
+        handleApply(row){
+            this.$router.push({
+                name: 'market/event/detail-pro',
+                query: {
+                    mode: 'view',
+                    type: 'template-branch',
+                    // url: 'template',
+                    id: row.id,
+                    btnOp:'apply',
+                    tempStatus:row.tempStatus
+                }
+            })
+        },
+        // 保存为场景库
+        handleSaveToTemplate(row){
+            this.mode = 'add'
+            this.checkOrgArr = [];
+            this.applyRow = row;
+            this.defaultTitle='保存为场景库'
+            this.$refs['dialog-save-scene'].add()
+            this.$nextTick(()=>{
+                this.$refs['dialog-save-scene'].clear()
+            })
+        },
+
+        beforeSubmit(form, mode) {
+           console.log('form',form,mode)
+        },
+        handleSubmitScene(){
+            this.formBtnLoading = true;
+            this.$refs['dialog-save-scene'].$refs.form.validate(async (valid) => {
+                if (valid) {
+                    let form = this.$refs['dialog-save-scene'].getForm();
+                    form.scenePkId = form.scenePkId?.length>0? form.scenePkId[form.scenePkId.length-1]:[]
+                    form.orgCodes = form.orgCodes?form.orgCodes?.split(','):[]
+                    if(this.mode === 'add'){
+                        const  data = Object. assign({},{id:this.applyRow.id},form)
+
+                        actSceneManageDetails(data).then(res=>{
+                            if(res.success){
+                                this.$message.success(res.errorMsg);
+                            }else{
+                                this.$message.warning(res.errorMsg);
+                            }
+                        }).catch(err=>{
+                            this.$message.error(err);
+                        }).finally(f=>{
+                            this.formBtnLoading = false;
+                            this.handleClose();
+                            this.$refs.table.refresh();
+                        })
+                    }else{
+                       const data =  Object.assign({},{id:this.applyRow.id,orgCodes:form.orgCodes})
+                       shareOrg(data).then(res=>{
+                            if(res.success){
+                                this.$message.success(res.errorMsg);
+                            }else{
+                                this.$message.warning(res.errorMsg);
+                            }
+                        }).catch(err=>{
+                            this.$message.error(err);
+                        }).finally(f=>{
+                            this.formBtnLoading = false;
+                            this.handleClose();
+                            this.$refs.table.refresh();
+                        })
+                    }
+                    
+                } else {
+                    this.formBtnLoading = false;
+                }
+            });
+        },
+        // 另存为场景库弹框关闭
+        handleClose(){
+            this.$refs['dialog-save-scene'].handleClose();
+        },
+        // 保存为场景库
+        handleSaveToTemplate(row){
+            this.mode = 'add'
+            this.checkOrgArr = [];
+            this.applyRow = row;
+            this.defaultTitle='保存为场景库'
+            this.$refs['dialog-save-scene'].add()
+            this.$nextTick(()=>{
+                this.$refs['dialog-save-scene'].clear()
+            })
+        },
+        onDeleteOrg(item){
+            this.checkOrgArr = this.checkOrgArr.filter(x=>x !== item.value)
+            this.$refs['dialog-save-scene'].setForm({
+                orgCodes:this.checkOrgArr.join(',')
+            })
+        },
+        onInputOrg(e){
+            let arr = e.split(',');
+            this.checkOrgArr = arr;
+            if(arr.length> 0){
+                this.$refs['dialog-save-scene'].clear()
+            }
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import '../template.less';
+</style>