You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

290 lines
7.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<!-- 编辑-->
<xy-dialog :is-show.sync="isShow" title="网站编辑" type="form" :form="detail" :rules="rules" @submit="editor"
ref="addActivity">
<template v-slot:name>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>网站名称
</div>
<div class="xy-table-item-content">
<el-input clearable placeholder="请填写网站名称" v-model="detail.name" style="width: 300px;" />
</div>
</div>
</template>
<template v-slot:url>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>网址
</div>
<div class="xy-table-item-content">
<el-input type="textarea" clearable placeholder="请输入网址" v-model="detail.url" style="width: 300px;" />
<div>需要添加http://或者https://</div>
</div>
</div>
</template>
<template v-slot:datetimerange>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>时间范围
</div>
<div class="xy-table-item-content">
<el-date-picker v-model="detail.datetimerange" type="daterange" :picker-options="pickerOptions"
range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:mobile>
<div class="xy-table-item">
<div class="xy-table-item-label">短信接收人
</div>
<div class="xy-table-item-content">
<el-input type="textarea" clearable placeholder="请填写短信接收人手机号英文逗号隔开" v-model="detail.mobile"
style="width: 300px;" />
<div>短信接收人手机号英文逗号隔开</div>
</div>
</div>
</template>
<template v-slot:email>
<div class="xy-table-item">
<div class="xy-table-item-label">邮件接收人
</div>
<div class="xy-table-item-content">
<el-input type="textarea" clearable placeholder="请填写邮件接收人英文逗号隔开" v-model="detail.email"
style="width: 300px;" />
<div>邮件接收人英文逗号隔开</div>
</div>
</div>
</template>
<template v-slot:status>
<div class="xy-table-item">
<div class="xy-table-item-label">状态
</div>
<div class="xy-table-item-content">
<el-select clearable v-model="detail.status">
<el-option :value="1" label="启用"></el-option>
<el-option :value="0" label="禁用"></el-option>
</el-select>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
save,
show
} from "@/api/other/url_check";
export default {
data() {
return {
isShow: false,
id: "",
type: "add",
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
detail: {
name: "",
url: "",
mobile: "",
status: 1,
start_time: "",
end_time: "",
datetimerange: [],
email: 'zhoucl@langye.net,wangqp@longyears.cn'
},
rules: {
name: [{
required: true,
message: "网站名称必填"
}],
url: [{
required: true,
message: "网站的域名必填"
}]
}
}
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.type = '';
this.detail.url = '';
this.detail.mobile = '';
this.detail.email = 'zhoucl@langye.net,wangqp@longyears.cn'
this.$refs['addActivity'].reset();
}
}
},
methods: {
async getDetail() {
let res = await show({
id: this.id
})
Object.assign(this.detail, res);
let range = [];
range.push(this.$moment(res.start_time).format("YYYY-MM-DD"));
range.push(this.$moment(res.end_time).format("YYYY-MM-DD"));
this.$set(this.detail, 'datetimerange', range)
if (this.detail.mobile)
this.detail.mobile = res.mobile.join(',')
if (this.detail.url)
this.detail.url = res.url.join(',')
if (this.detail.email)
this.detail.email = res.email.join(',')
},
editor() {
this.detail.start_time = this.detail.datetimerange[0];
this.detail.end_time = this.detail.datetimerange[1];
if (this.detail.mobile != '' && this.detail.mobile)
this.detail.mobile = this.detail.mobile.split(',')
if (this.detail.url != '' && this.detail.url)
this.detail.url = this.detail.url.split(',')
if (this.detail.email != '' && this.detail.email)
this.detail.email = this.detail.email.split(',')
save(this.detail).then(res => {
this.isShow = false
this.$Message.success("操作成功");
this.$emit('refresh')
})
},
},
computed: {
},
mounted() {},
created() {
if (this.type != 'editor') {
let sdate = this.$moment().format("YYYY-MM-DD");
let edate = this.$moment().add(5, 'years').format("YYYY-MM-DD");
let range = [sdate, edate];
this.$set(this.detail, 'datetimerange', range)
}
}
}
</script>
<style scoped lang="scss">
.contract-add-plan {
min-height: 30px;
border: 1px solid #dcdee2;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
padding: 0 8px;
&-no-plan {
height: 30px;
line-height: 30px;
color: #CDD0D5;
}
}
.xy-table-item-label {
width: 140px;
}
.xy-table-item-price {
position: relative;
&::after {
z-index: 1;
position: absolute;
right: 0;
top: 0;
content: ''
}
::v-deep .el-input__clear {
position: relative;
right: 30px;
z-index: 2;
}
}
.xy-table-item-price-wan {
position: relative;
&::after {
position: absolute;
right: 0;
top: 0;
content: ''
}
::v-deep .el-input__clear {
position: relative;
right: 46px;
z-index: 2;
}
}
</style>