dd_pc/src/views/set/log.vue

<template>
	<div class="all-box">
		<div class="all" style="padding: 40px;">
			<div style="margin-bottom: 30px;">
				<div class="initia_title">工作日志积分</div>
				<div class="initia_title_1">日志的相关说明</div>
			</div>
			<el-table ref="multipleTable" :data="list" tooltip-effect="dark" align="center" v-loading="loading">
				<el-table-column label="序号" align="left" type="index"></el-table-column>
				<el-table-column label="日志名称" prop="name"></el-table-column>
				<el-table-column label="日志积分规则">
					<template slot-scope="scope">
						<span>{{ getMoney(scope.row.interval) }}{{ scope.row.config.upper_limit }}汇报,每次奖{{ scope.row.config.point }} B分</span>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.enable == 0" class="yellow">已禁用</span>
						<span v-else class="green">已启用</span>
					</template>
				</el-table-column>
				<el-table-column label="">
					<template slot-scope="scope">
						<div @click.stop="openSet(scope.row)"><span class="lookQrcode">设置</span></div>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>
		</div>
		<el-dialog title="设置" :visible.sync="dialogVisible" top="25vh" width="520px">
			<el-form label-width="110px" :model="selectItem" ref="setForm">
				<el-form-item label="是否启用"><el-switch v-model="selectItem.enable" active-color="#13ce66" inactive-color="rgb(202 202 202)"></el-switch></el-form-item>
				<el-form-item label="日志名称" prop="name" :rules="[{ required: true, message: '请输入日志名称'}]">
					  <el-popover placement="top-start" title="温馨提示" width="200" trigger="hover" content="日志名称必须与钉钉预设模板名称一致,否则可能会无法同步钉钉的日志记录">
						 <el-input style="width: 200px;" v-model="selectItem.name" slot="reference"></el-input>
					  </el-popover>
				</el-form-item>
				<!-- <div style="margin-left: 110px;" class="yellow">*日志名称必须与钉钉预设模板名称一致</div> -->
				<div class="title">日志汇报要求</div>
				<el-form-item label="日志汇报要求" prop="interval" :rules="[{ required: true, message: '请选择汇报要求'}]">
					  <el-select class="widthInput"  v-model="selectItem.interval" placeholder="请选择">
					    <el-option v-for="item in options"  :key="item.value" :label="item.label" :value="item.value"></el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="每次汇报奖" :rules="[{ required: true, message: '请输入分值', trigger: 'change' }]" prop="config.point">
					<el-input class="widthInput"  oninput="value=value.replace(/[^\d]/g,'')"  v-model.number="selectItem.config.point"></el-input><span style="margin-left: 5px;">B分</span>
				</el-form-item>
				<el-form-item label="汇报提交超过" prop="config.upper_limit" :rules="[{ required: true, message: '请输入次数'}]" >
					<el-input class="widthInput"  oninput="value=value.replace(/[^\d]/g,'')" v-model.number="selectItem.config.upper_limit"></el-input><span style="margin-left: 5px;">次,不再奖励积分</span>
				</el-form-item>
				<el-form-item style="text-align: right; margin-bottom: 0">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" :loading="setLoading" :disabled="setLoading" @click="submit('setForm')">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import noData from '@/components/noData';
export default {
	components: { noData },
	data() {
		return {
			loading: false,
			setLoading: false,
			ding_enable: true,
			list: [],
			dialogVisible: false,
			selectItem:{
				config: {point: "", upper_limit: ""},
				enable: '',
				id: '',
				interval: '',
				name: "",
				site_id: '',
				type: "",
			},
			options: [{
			  value: 1,
			  label: '每日'
			}, {
			  value: 2,
			  label: '每周'
			}, {
			  value: 3,
			  label: '每月'
			}],
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		submit(fromName) {
			this.$refs[fromName].validate(valid => {
				if (valid) {
					this.setLoading = true;
					let jsonItem=JSON.stringify(this.selectItem)
					let data=JSON.parse(jsonItem);
					data.enable=data.enable? 1:0;
					data.point=data.config.point;
					data.upper_limit=data.config.upper_limit;
					this.$axios('post', '/api/integral/report/templates', data).then(res => {
						if (res.data.code == 1) {
							this.$message.success(res.data.msg);
							this.getList();
							this.dialogVisible = false;
						}
					}).finally(() => {
						this.setLoading = false;
					});
				}
			});
		},
		openSet(item) {
			var jsonItem=JSON.stringify(item)
			this.selectItem=JSON.parse(jsonItem);
			this.selectItem.enable=this.selectItem.enable==0? false:true
			this.dialogVisible=true;
		},
		getMoney: function(index) {
			var str; //1-每日 2-每周 3-每月
			switch (index) {
				case 1:
					str = '每日';
					break;
				case 2:
					str = '每周';
					break;
				case 3:
					str = '每月';
					break;
			}
			return str;
		},
		getList() {
			this.loading = true;
			this.$axios('get', '/api/integral/report/templates/list')
				.then(res => {
					this.list = res.data.data.list;
				})
				.finally(err => {
					this.loading = false;
				});
		}
	}
};
</script>
<style scoped lang="scss">
 .widthInput{
	 width: 120px;
 }	
.title {
	margin: 10px 0;
	margin-top: 0;
	font-size: 16px;
	font-weight: 700;
}
.initia_title {
	font-size: 20px;
	color: rgba(48, 49, 51, 1);
	font-family: PingFangSC-Regular;
}
.initia_title_1 {
	color: #606266;
	font-size: 14px;
	margin-top: 10px;
}
.lookQrcode {
	color: #606266;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 700;
}
.lookQrcode:hover {
	color: #2490fd;
}
</style>