|
|
@@ -0,0 +1,295 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-main ref="elMain" style="padding: 0px">
|
|
|
+ <el-row style="margin: 0px 20px">
|
|
|
+ <el-button
|
|
|
+ icon="fa fa-plus"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增报价单</el-button
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <kt-common-table :showBatchDelete="false" :showBatchSettled="true" :showBatchPrint="true"
|
|
|
+ :data="pageResult" :columns="columns" @findPage="findPage" button1Name="编辑" @handleButton1="bannerput"
|
|
|
+ button2Name="删除" @handleButton2="bannerdelete" >
|
|
|
+ </kt-common-table>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ <!-- 新增协议的对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-dialogDrag
|
|
|
+ :title="dialogTitle"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="840px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <el-form :model="form" ref="form" label-width="120px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="轮播图图片" prop="image" style="width: 100%">
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ list-type="picture-card"
|
|
|
+ :auto-upload="false"
|
|
|
+ :limit="1"
|
|
|
+ :file-list="fileList"
|
|
|
+ :on-exceed="uploadlimit"
|
|
|
+ :on-change="drivingupload1"
|
|
|
+ accept=".png, .jpg, .jpeg"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="轮播图名称" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="form.title"
|
|
|
+ placeholder="请输入轮播图名称"
|
|
|
+ style="width: 300px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="轮播图排序" prop="sort">
|
|
|
+ <el-input
|
|
|
+ v-model="form.sort"
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入排序"
|
|
|
+ style="width: 150px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机头部颜色" prop="color">
|
|
|
+ <el-color-picker
|
|
|
+ v-model="color"
|
|
|
+ @change="colorchange"
|
|
|
+ ></el-color-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否开启" prop="enable">
|
|
|
+ <el-select v-model="form.enable" placeholder="请选择是否开启">
|
|
|
+ <el-option label="开启" :value="1"></el-option>
|
|
|
+ <el-option label="关闭" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="轮播图跳转链接" prop="url">
|
|
|
+ <el-input v-model="form.url" placeholder="请输入跳转链接"> </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { formatWithSeperator, format } from "@/utils/datetime.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogTitle: "",
|
|
|
+ fileList: [],
|
|
|
+ dialogVisible: false, //控制对话框显示
|
|
|
+ form: {
|
|
|
+ title: "", //标题
|
|
|
+ url: "", //跳转链接
|
|
|
+ image: "", //图片base64
|
|
|
+ sort: "", //排序
|
|
|
+ enable: 1, //是否开启 1:0
|
|
|
+ color: "", //颜色
|
|
|
+ },
|
|
|
+ pageResult: [],
|
|
|
+ color: null,
|
|
|
+ id: "",
|
|
|
+ columns:[ //数据列
|
|
|
+ {prop: "id",label: "id"},
|
|
|
+ {prop: "quotationAbbr",label: "报价单简称"},
|
|
|
+ // formatter:this.imgFormatter
|
|
|
+ {prop: "quotationDescr",label: "报价单描述"},
|
|
|
+ {prop: "state",label: "状态",formatter:this.enableFormatter},
|
|
|
+ {prop: "userId",label: "提交用户"},
|
|
|
+ {prop: "createTime",label: "修改时间",},
|
|
|
+ ],
|
|
|
+ pageRequest: { //查询的默认条件
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ // 右侧列表查询数据End
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ drivingupload1(file) {
|
|
|
+ this.form.image = "";
|
|
|
+ var file = file.raw;
|
|
|
+ var _this = this;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = function (e) {
|
|
|
+ // 图片base64化
|
|
|
+ _this.form.image = this.result;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ uploadlimit(files, fileList) {
|
|
|
+ if (fileList.length == "1") {
|
|
|
+ this.$message({
|
|
|
+ message: "一次最多只能上传一张",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bannerput(index, row) {
|
|
|
+ console.log(row);
|
|
|
+ //修改
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.form = row;
|
|
|
+ this.id = row.id;
|
|
|
+ },
|
|
|
+ bannerdelete(ndex, row) {
|
|
|
+ this.$confirm("确定删除该图片吗?,请谨慎操作", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let id = row.id;
|
|
|
+ this.$api.task.bannerDelete(id).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ colorchange(e) {
|
|
|
+ this.form.color = e;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!!this.id) {
|
|
|
+ this.$api.task.bannerPut(this.form, this.id).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$api.task.banneradd(this.form).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgFormatter(row) {
|
|
|
+ let image = row.image;
|
|
|
+ return <img src={"" + image + ""} class="imageclass"></img>;
|
|
|
+ },
|
|
|
+ //新增海报
|
|
|
+ handleAdd() {
|
|
|
+ this.dialogTitle = "新增轮播图";
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ //--数据字典 end --
|
|
|
+ // 上传图片的方法End
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm("确认关闭?", { lockScroll: false })
|
|
|
+ .then((_) => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ },
|
|
|
+ //-- formatter begin--
|
|
|
+ enableFormatter(row) {
|
|
|
+ if (row.state == 1) {
|
|
|
+ return "开启";
|
|
|
+ } else {
|
|
|
+ return "关闭";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 右侧列表的方法Start
|
|
|
+ findPage(data) {
|
|
|
+ if(data && data.pageRequest){
|
|
|
+ this.pageRequest.pageNum = data.pageRequest.pageNum;
|
|
|
+ this.pageRequest.pageSize = data.pageRequest.pageSize;
|
|
|
+ }
|
|
|
+ this.$api.task.quotationPage(this.pageRequest).then((res) => {
|
|
|
+ if(res.code==200){
|
|
|
+ this.pageResult = res.data?res.data:[]
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.queryForm .el-row {
|
|
|
+ margin: 0px;
|
|
|
+}
|
|
|
+.queryForm .el-form-item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 150px;
|
|
|
+ height: 266px;
|
|
|
+ line-height: 266px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 150px;
|
|
|
+ height: 266px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.imageclass {
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|