|
|
@@ -0,0 +1,129 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form :rules="rules" :model="form">
|
|
|
+ <el-form-item label="任务名称" prop="title">
|
|
|
+ <el-input v-model="form.title" placeholder="请填写任务名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="任务说明" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="6"
|
|
|
+ placeholder="请填写任务说明"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="任务期限">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="截止日期"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="full-width flex flex-align-center mt-10">
|
|
|
+ <span class="font-14 bold">生成二维码</span>
|
|
|
+ <el-button
|
|
|
+ circle
|
|
|
+ class="ml-20"
|
|
|
+ icon="Picture"
|
|
|
+ type="danger"
|
|
|
+ @click="initCode()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="full-width mt-20 border-top padding-top flex flex-justify-end"
|
|
|
+ >
|
|
|
+ <el-button @click="close">取消</el-button>
|
|
|
+ <el-button type="primary" @click="close">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-dialog v-model="qrCodeShow" width="400px">
|
|
|
+ <div
|
|
|
+ class="flex flex-col flex-center"
|
|
|
+ style="height: 400rpx; width: 400rpx"
|
|
|
+ >
|
|
|
+ <vue-qr
|
|
|
+ :currentLevel="3"
|
|
|
+ :logoCornerRadius="4"
|
|
|
+ :logoScale="0.25"
|
|
|
+ :text="qrCodeText"
|
|
|
+ size="340"
|
|
|
+ />
|
|
|
+ <span>右键复制二维码,通过微信进行分享</span>
|
|
|
+ <span>{{ qrCodeText }}</span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VueQr from 'vue-qr/src/packages/vue-qr.vue'
|
|
|
+import { objectToParams } from '@/utils/tools.js'
|
|
|
+export default {
|
|
|
+ name: 'task',
|
|
|
+ components: { VueQr },
|
|
|
+ props: {
|
|
|
+ projectId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ folders: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ qrCodeText: '',
|
|
|
+ qrCodeShow: false,
|
|
|
+ rules: {
|
|
|
+ title: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
|
|
+ remark: [{ required: true, message: '请输入任务说明', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ title: '',
|
|
|
+ remark: '',
|
|
|
+ date: '',
|
|
|
+ taskStartTime: '',
|
|
|
+ taskEndTime: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initCode() {
|
|
|
+ // this.qrCodeShow = true
|
|
|
+ if (this.form.date.length !== 2) {
|
|
|
+ this.$message.error('请按要求选择时间段')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.form.folderIds = this.folders.map(sub => sub.id)
|
|
|
+ this.form.taskStartTime = this.form.date[0]
|
|
|
+ this.form.taskEndTime = this.form.date[1]
|
|
|
+ this.form.projectId = this.projectId
|
|
|
+ this.$api.task.add(this.form).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.qrCodeShow = true
|
|
|
+ const data = res.data
|
|
|
+ this.qrCodeText =
|
|
|
+ 'https://prod.wutongshucloud.com/apply?id=' +
|
|
|
+ data.qrcodeId +
|
|
|
+ '&' +
|
|
|
+ objectToParams(res.data)
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped></style>
|