Mr.Zhang
2023-10-12 7f05ab4e75036b2697c9208e581f609b27f0af82
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<template>
  <TableLayout :permissions="['business:baseparam:query']">
    <!-- 搜索表单 -->
    <el-form ref="form" slot="search-form" :model="form" label-width="130px" label-suffix=":">
 
      <el-form-item label="主页主题">
        <el-input v-model="form.projectName" placeholder="请输入主页主题"></el-input>
      </el-form-item>
      <el-form-item label="服务电话">
        <el-input v-model="form.serverPhone" placeholder="请输入服务电话"></el-input>
      </el-form-item>
      <el-form-item label="押金金额">
        <el-input v-model="form.rentDeposit" placeholder="请输入押金金额"></el-input>
        <div class="tips">请输入需要缴纳的押金金额(单位:元)</div>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-time-select placeholder="开始时间" v-model="form.businessStarttime"></el-time-select>
        至
        <el-time-select placeholder="结束时间" v-model="form.businessEndtime"></el-time-select>
      </el-form-item>
      <el-form-item label="免费骑行时长">
        <el-input v-model="form.freeRentTime" placeholder="请输入名称"></el-input>
        <div class="tips">免费骑行时长,单位:分钟</div>
      </el-form-item>
      <el-form-item label="满载预警(%)" prop="name">
        <div style="display: flex;">
          低于<el-input style="width: 80px;" v-model="form.warnMin" placeholder="最小值"></el-input>
          或高于<el-input style="width: 80px;" v-model="form.warnMax" placeholder="最大值"></el-input>
          会想钉钉群发送预警
        </div>
        <div class="tips">当车辆满载超过以上配置时,提示管理员</div>
      </el-form-item>
      <el-form-item label="预警钉钉群地址">
        <el-input v-model="form.warnDingdingUrl" placeholder="请输入预警钉钉群地址"></el-input>
      </el-form-item>
      <el-form-item label="租赁流程视频" prop="name">
        <!-- :before-upload="beforeAvatarUpload" -->
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          accept=".mp4" :on-success="handleAvatarSuccess">
          <video v-if="form.rentTipsVideo" :src="form.rentTipsVideo" class="avatar"></video>
          <!-- <img v-if="imageUrl" :src="imageUrl" > -->
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="tips">只能上传mp4格式,建议不超过50M</div>
      </el-form-item>
      <el-form-item label="骑车通知内容">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.rentNotice"
          placeholder="请输入骑车通知内容"></el-input>
      </el-form-item>
      <el-form-item label="是否停止服务">
        <el-switch v-model="form.isStopServe" active-value="1" inactive-value="0" active-color="#13ce66"></el-switch>
      </el-form-item>
      <template v-if="form.isStopServe == 1">
        <el-form-item label="停止服务提示" prop="name">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.stopServeTips"
            placeholder="请输入停止服务提示"></el-input>
        </el-form-item>
        <el-form-item label="停止服务时间">
          <el-time-select placeholder="开始时间" v-model="form.stopServeStarttime"></el-time-select>
          至
          <el-time-select placeholder="结束时间" v-model="form.stopServeEndtime"></el-time-select>
          <div class="tips">停止服务开始时间至结束时间</div>
        </el-form-item>
      </template>
      <el-form-item label="">
        <el-button type="primary" v-permissions="['system:dict:updateMiniProgrammeDTO']" @click="saveSetting">保存配置项</el-button>
      </el-form-item>
    </el-form>
  </TableLayout>
</template>
 
<script>
import TableLayout from '@/layouts/TableLayout'
import { getMiniProgrammeDTO, updateById } from '@/api/business/minproSetting'
export default {
  name: 'BaseParam',
  components: { TableLayout },
  data() {
    return {
      // 搜索
      form: {
        businessEndtime: '',
        businessStarttime: '',
        freeRentTime: '',
        isStopServe: 0,
        projectName: '',
        rentDeposit: '',
        rentNotice: '',
        rentTipsVideo: '',
        serverPhone: '',
        stopServeStarttime: '',
        stopServeEndtime: '',
        stopServeTips: '',
        warnDingdingUrl: '',
        warnMax: '',
        warnMin: '',
      }
    }
  },
  created() {
    getMiniProgrammeDTO()
      .then(res => {
        console.log(res);
        this.form = res
      })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // beforeAvatarUpload(file) {
    //   console.log(file.type);
    //   const isJPG = file.type === 'video/mp4';
 
    //   if (!isJPG) {
    //     this.$message.error('只能是 mp4 格式!');
    //   }
    //   // if (!isLt2M) {
    //   //   this.$message.error('上传头像图片大小不能超过 2MB!');
    //   // }
    //   return isJPG;
    // },
    saveSetting() {
      updateById(this.form)
        .then(res => {
          this.$tip.apiSuccess('保存成功')
        })
    }
  },
}
</script>
 
<style lang="scss" scoped>
::v-deep .el-form {
  width: 800px;
}
 
::v-deep .table-content {
  padding: 0 !important;
 
  .table-wrap {
    padding: 0 !important;
  }
}
 
.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
 
  ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
}
 
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}
 
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
 
.tips {
  color: #999;
}
</style>