|
@@ -0,0 +1,262 @@
|
|
|
+<template>
|
|
|
+ <div class="inline-16">
|
|
|
+ <el-button type="text" size="small" @click="onShow(dialogFormVisible = true)">编 辑</el-button>
|
|
|
+ <el-dialog title="编辑模板" append-to-body :visible.sync="dialogFormVisible" width="800px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px" size="small">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="标题" prop="title">
|
|
|
+ <el-input type="text" v-model="form.title" placeholder="输入提报标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开始日期" prop="begdate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:100%"
|
|
|
+ v-model="form.begdate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-mm-dd"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="结束日期" prop="enddate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:100%"
|
|
|
+ v-model="form.enddate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-mm-dd"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="提醒时间" prop="taskdays">
|
|
|
+ <div class="flex-align-center"><span style="width:40px">提 前:</span><el-input type="number" style="width:200px" v-model="form.taskdays" placeholder="输入提醒时间"></el-input> <span>天</span></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="flex-align-center my-error-panel">
|
|
|
+ <el-form-item label="提报周期" prop="periodtype">
|
|
|
+ <el-select style="width:120px" v-model="form.periodtype" placeholder="请选择提报周期" @change="handleChange">
|
|
|
+ <el-option label="每周" value="周"></el-option>
|
|
|
+ <el-option label="每月" value="月"></el-option>
|
|
|
+ <el-option label="仅一次" value="once"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="0px" prop="periodpoint">
|
|
|
+ <el-popover
|
|
|
+ v-if="form.periodtype !== 'once'"
|
|
|
+ placement="bottom"
|
|
|
+ width="400"
|
|
|
+ trigger="click">
|
|
|
+ <div :class="error?'error':''" class="periodTags" slot="reference">
|
|
|
+ <p v-if="form.periodpoint.length === 0">请选择</p>
|
|
|
+ <div v-else>
|
|
|
+ <el-tag v-for="item in form.periodpoint" type="info" size="mini" :key="item.index" style="margin-right:5px" @close="closeDate(item)" closable>
|
|
|
+ {{form.periodtype === '周'?'周'+ `${item===7?'日':item}`:item+'日'}}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :class="act === item?'act':''" @click.native="clickdate(item)" style="height:50px;line-height:50px;text-align:center;cursor: pointer;" v-for="item in period" :key="item" :span="form.periodtype==='月'?4:8">{{form.periodtype === '周'?'周'+ `${item===7?'日':item}`:item+'日'}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-popover>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="提报要求">
|
|
|
+ <el-checkbox v-model="form.baseonproject" :true-label="1" :false-label="0">按项目预测</el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注" :rows="3"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="发布范围" prop="roles">
|
|
|
+ <el-select style="width:100%" v-model="form.roles" placeholder="请选择角色" @remove-tag="removeTag" multiple>
|
|
|
+ <el-option v-for="item in rolelist" :key="item.index" :label="item.rolename" :value="item.roleid"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props:['data'],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ error:false,
|
|
|
+ dialogFormVisible:false,
|
|
|
+ form:{
|
|
|
+ sa_salesforecastmodelid:0,
|
|
|
+ title:'',
|
|
|
+ remarks:'',
|
|
|
+ begdate:'',
|
|
|
+ enddate:'',
|
|
|
+ periodtype:'周',
|
|
|
+ periodpoint:[],
|
|
|
+ baseonproject:false,
|
|
|
+ isrepeat:true,
|
|
|
+ taskdays:0,
|
|
|
+ sales:[],
|
|
|
+ roles:[],
|
|
|
+
|
|
|
+ },
|
|
|
+ period:7,
|
|
|
+ act:0,
|
|
|
+ rolelist:[],
|
|
|
+ oldrolelist:[],
|
|
|
+ rules:{
|
|
|
+ title: [
|
|
|
+ { required: true, message: '请输入提报标题', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ periodtype: [
|
|
|
+ { required: true, message: '请选择周期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ begindate: [
|
|
|
+ { required: true, message: '请选择开始日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ enddate: [
|
|
|
+ { required: true, message: '请选择结束日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ taskdays:[
|
|
|
+ { required: true, message: '请输提醒天数', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ periodpoint:[
|
|
|
+ { validator: this.checkPeriodpoint, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ roles: [
|
|
|
+ { required: true, message: '请选择角色', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ checkPeriodpoint (rule, value, callback) {
|
|
|
+ if (value.length === 0 && this.form.periodtype !== 'once') {
|
|
|
+ this.error = true
|
|
|
+ return callback(new Error('请选择周期'));
|
|
|
+ } else {
|
|
|
+ this.error = false
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async queryMainData (fn) {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20220906150303,
|
|
|
+ "version":1,
|
|
|
+ "content": {
|
|
|
+ "sa_salesforecastmodelid":this.data.sa_salesforecastmodelid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.form = res.data
|
|
|
+ fn()
|
|
|
+ },
|
|
|
+ onShow () {
|
|
|
+ this.queryRoles()
|
|
|
+ this.queryMainData(()=>{
|
|
|
+ this.form.periodtype = this.form.periodtype === ''?'once':this.form.periodtype
|
|
|
+ this.form.periodpoint = this.form.periodpointchange
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSubmit () {
|
|
|
+ this.$refs['form'].validate(async (valid) => {
|
|
|
+ if (!valid) return false
|
|
|
+ let data = Object.assign({},this.form)
|
|
|
+ data.roles = this.form.roles.map(e=>{
|
|
|
+ return {
|
|
|
+ "sa_salesforecastmodelroleid":0,
|
|
|
+ "roleid": e
|
|
|
+ }
|
|
|
+ })
|
|
|
+ data.periodtype === 'once'?data.periodtype= '':data.periodtype
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20220906150103,
|
|
|
+ "version":1,
|
|
|
+ "content": data
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,()=>{
|
|
|
+ this.$emit('onSuccess')
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickdate (item) {
|
|
|
+ this.act = item
|
|
|
+ this.form.periodpoint.push(item)
|
|
|
+ this.form.periodpoint = [...[],...new Set(this.form.periodpoint)]
|
|
|
+ },
|
|
|
+ closeDate (item) {
|
|
|
+ this.form.periodpoint = this.form.periodpoint.filter(e=>{
|
|
|
+ return e !== item
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleChange (val) {
|
|
|
+ this.form.isrepeat = true
|
|
|
+ this.form.periodpoint = []
|
|
|
+ val === '月'?this.period = 31:val==='周'?this.period =7:this.form.isrepeat = false
|
|
|
+ },
|
|
|
+ removeTag (tag) {
|
|
|
+ this.oldrolelist = this.oldrolelist.filter(e=>{
|
|
|
+ return e.roleid !== tag
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async queryRoles () {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "classname": "webmanage.role.role",
|
|
|
+ "method": "query_roleList",
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 1000,
|
|
|
+ "where":{
|
|
|
+ "condition":"",
|
|
|
+ "usertype":"",
|
|
|
+ "issystem":1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.rolelist = res.data
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.my-error-panel .el-form-item__error{
|
|
|
+ text-indent: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.periodTags{
|
|
|
+ border:1px solid #dcdfe6;
|
|
|
+ min-height:32px;
|
|
|
+ /* margin-bottom:18px; */
|
|
|
+ padding:0 10px;
|
|
|
+ margin-left:10px;
|
|
|
+ line-height:32px;
|
|
|
+ border-radius: 4px;
|
|
|
+ min-width: 400px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.act{
|
|
|
+ background: #dcdfe6;
|
|
|
+}
|
|
|
+.error{
|
|
|
+ border:1px solid red !important;;
|
|
|
+}
|
|
|
+</style>
|