|
|
@@ -0,0 +1,521 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="page-header">
|
|
|
+ 轮播图管理
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="(dialogVisible = true), (type = 1)"
|
|
|
+ >新增</el-button>
|
|
|
+
|
|
|
+ <el-button size="small" type="danger" @click="batchDelete()">删除</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="mymain-container">
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <template v-for="col in columns">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :label="col.lable"
|
|
|
+ :prop="col.prop"
|
|
|
+ :min-width="col.widht"
|
|
|
+ show-overflow-tooltip
|
|
|
+ v-if="col.prop == 'status'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="z-index: 99">
|
|
|
+ <el-tag type="success" v-if="scope.row.status == '1'" >显示</el-tag>
|
|
|
+ <el-tag type="danger" v-else-if="scope.row.status == '0'">隐藏 </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :label="col.lable"
|
|
|
+ :prop="col.prop"
|
|
|
+ :min-width="col.widht"
|
|
|
+ show-overflow-tooltip
|
|
|
+ v-if="col.prop == 'imgCarouselUrl'"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <a :href="scope.row.imgCarouselUrl" >
|
|
|
+ <img :src="scope.row.imgCarouselUrl" alt="轮播图" class="el-image__inner el-image__preview"/>
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ v-else
|
|
|
+ align="center"
|
|
|
+ :label="col.lable"
|
|
|
+ :prop="col.prop"
|
|
|
+ :min-width="col.widht"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ min-width="160"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small" @click="hanleEdit(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '1'">隐藏</el-button>
|
|
|
+ <el-button type="text" size="small" @click="hanleStatus(scope.row.id)" v-if="scope.row.status === '0'">显示</el-button>
|
|
|
+
|
|
|
+
|
|
|
+ <el-popconfirm
|
|
|
+ title="确定要删除这张轮播图吗？"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ @onConfirm="hanleDelete(scope.row.id)"
|
|
|
+ >
|
|
|
+ <el-button slot="reference" type="text" size="small"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <!-- <div style="margin: 20px 0">-->
|
|
|
+ <!-- <el-pagination-->
|
|
|
+ <!-- @size-change="handleSizeChange"-->
|
|
|
+ <!-- @current-change="handleCurrentChange"-->
|
|
|
+ <!-- :current-page="currentPage"-->
|
|
|
+ <!-- :page-sizes="[10, 20, 30, 50]"-->
|
|
|
+ <!-- :page-size="10"-->
|
|
|
+ <!-- layout="total, sizes, prev, pager, next, jumper"-->
|
|
|
+ <!-- :total="listTotal"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- </el-pagination>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加公司备案信息 -->
|
|
|
+ <div>
|
|
|
+ <div class="setting_title">备案管理</div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <el-card shadow="never" class="my-card">
|
|
|
+ <el-form
|
|
|
+ class="my-form"
|
|
|
+ ref="mainForm"
|
|
|
+ :model="comPanyDialogForm"
|
|
|
+ label-width="120px"
|
|
|
+ label-position="right"
|
|
|
+ >
|
|
|
+ <el-form-item label="ICP备案:" prop="nickName">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="comPanyDialogForm.icpRecord"
|
|
|
+ ></el-input
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="ICP备案链接:" prop="nickName">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="comPanyDialogForm.icpRecordLink"
|
|
|
+ ></el-input
|
|
|
+ > (填写链接，可跳转至链接页面)
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="公网安备案:" prop="nickName">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="comPanyDialogForm.pubSecurityRecord"
|
|
|
+ ></el-input
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="公网安备案链接:" prop="nickName">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="comPanyDialogForm.pubSecurityRecordLink"
|
|
|
+ ></el-input
|
|
|
+ > (填写链接，可跳转至链接页面)
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div class="setting_title">公司名称管理</div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <el-form-item label="公司名称:" prop="nickName">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="单行输入"
|
|
|
+ v-model="comPanyDialogForm.companyName"
|
|
|
+ ></el-input
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="page-footer">
|
|
|
+ <div class="footer">
|
|
|
+ <!-- <el-button type="primary" @click="editFn">修改</el-button>-->
|
|
|
+ <el-button type="primary" @click="addComPany">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="50%"
|
|
|
+ @close="resetForm"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="dialogForm"
|
|
|
+ :model="dialogForm"
|
|
|
+ :rules="type == 1 ? rules : ''"
|
|
|
+ label-width="120px"
|
|
|
+ size="normal"
|
|
|
+ >
|
|
|
+ <el-form-item label="轮播图名称" prop="saleCode">
|
|
|
+ <el-input v-model="dialogForm.imgCarouselName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="轮播图" prop="fileUrl">
|
|
|
+ <ImageUpload :fileList="fileList" :multiple="true" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="排序" prop="mainId">
|
|
|
+ <el-input v-model="dialogForm.imgCarouselOrder"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="(dialogVisible = false), resetForm()"
|
|
|
+ >取 消</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="addImgCarousel">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Mixin from "@/mixin/index";
|
|
|
+ import Pagination from "@/components/Pagination";
|
|
|
+ import ImageUpload from '@/components/Common/image-upload.vue';
|
|
|
+ import {
|
|
|
+ delTypeData,
|
|
|
+ addData,
|
|
|
+ updateType,
|
|
|
+ getProductList,
|
|
|
+ getImgCarouseList,
|
|
|
+ handleImgIsShow,
|
|
|
+ addImgCarousel,
|
|
|
+ delImgData,
|
|
|
+ addCompany,
|
|
|
+ } from "@/api/policy_list";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mixins: [Mixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ type: 0, // 0,1
|
|
|
+ screenForm: {
|
|
|
+ companyRecordManageId: "",
|
|
|
+ imgCarouselName: "",
|
|
|
+ imgCarouselUrl: "",
|
|
|
+ imgCarouselOrder: "",
|
|
|
+ status: "",
|
|
|
+ },
|
|
|
+ dialogForm: {
|
|
|
+ id: "",
|
|
|
+ companyRecordManageId: "",
|
|
|
+ imgCarouselName: "",
|
|
|
+ imgCarouselUrl: "",
|
|
|
+ imgCarouselOrder: "",
|
|
|
+ status: "1",
|
|
|
+ },
|
|
|
+ comPanyDialogForm: {
|
|
|
+ id: "",
|
|
|
+ icpRecord: "",
|
|
|
+ icpRecordLink: "",
|
|
|
+ pubSecurityRecord: "",
|
|
|
+ pubSecurityRecordLink: "",
|
|
|
+ companyName: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ name: "王小虎",
|
|
|
+ label: "姓名",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: "imgCarouselName",
|
|
|
+ lable: "轮播图名称",
|
|
|
+ widht: 160,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "imgCarouselUrl",
|
|
|
+ lable: "轮播图",
|
|
|
+ widht: 160,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: "imgCarouselOrder",
|
|
|
+ lable: "排序",
|
|
|
+ widht: 160,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "createTime",
|
|
|
+ lable: "创建时间",
|
|
|
+ widht: 160,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "status",
|
|
|
+ lable: "状态",
|
|
|
+ widht: 160,
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "",
|
|
|
+ label: "状态",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: "显示",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: "隐藏",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rules: {
|
|
|
+ imgCarouselName: [
|
|
|
+ { required: true, message: "请输入轮播图名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ // saleName: [
|
|
|
+ // { required: true, message: "请输入销售类型名称", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ // mainName: [
|
|
|
+ // { required: true, message: "请输入品类名称", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ productList: [],
|
|
|
+ fileList: [],
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true;
|
|
|
+ const params = {
|
|
|
+ pageNum: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ saleCode: this.screenForm.saleCode,
|
|
|
+ saleName: this.screenForm.saleName,
|
|
|
+ mainId: "",
|
|
|
+ status: this.screenForm.status,
|
|
|
+ };
|
|
|
+ // getTypeList(params).then((res) => {
|
|
|
+ // this.dataList = res.data.records;
|
|
|
+ // this.listTotal = res.data.total;
|
|
|
+ // this.listLoading = false;
|
|
|
+ // });
|
|
|
+ getImgCarouseList(params).then((res) => {
|
|
|
+ console.log(res.data);
|
|
|
+ this.dataList = res.data;
|
|
|
+ this.listLoading = false;
|
|
|
+ });
|
|
|
+ getProductList({
|
|
|
+ productCategoryName: "",
|
|
|
+ productCategoryNumber: "",
|
|
|
+ }).then((res) => {
|
|
|
+ this.productList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleChange(e) {
|
|
|
+ this.productList.find((k) => {
|
|
|
+ if (k.productCategoryNumber == e) {
|
|
|
+ this.dialogForm.mainId = k.productCategoryNumber;
|
|
|
+ this.dialogForm.mainName = k.productCategoryName;
|
|
|
+ this.screenForm.mainId = k.productCategoryNumber;
|
|
|
+ this.screenForm.mainName = k.productCategoryName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ hanleDelete(id) {
|
|
|
+ this.hanleDeleteAllPromise(id).then((ids) => {
|
|
|
+ delImgData({
|
|
|
+ ids: ids[0],
|
|
|
+ }).then((res) => {
|
|
|
+ this.$successMsg("删除成功");
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ hanleEdit(item) {
|
|
|
+ this.dialogForm = {
|
|
|
+ // id: item.id,
|
|
|
+ companyRecordManageId: item.companyRecordManageId,
|
|
|
+ imgCarouselName: item.imgCarouselName,
|
|
|
+ imgCarouselUrl: item.imgCarouselUrl,
|
|
|
+ imgCarouselOrder: item.imgCarouselOrder,
|
|
|
+ status: item.status,
|
|
|
+ };
|
|
|
+ this.type = 0;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ hanleDateil(item) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.dialogForm = {
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
+ this.type = 3;
|
|
|
+ },
|
|
|
+
|
|
|
+ hanleStatus(id){
|
|
|
+ handleImgIsShow({
|
|
|
+ id:id
|
|
|
+ }).then((res) => {
|
|
|
+ this.$successMsg("状态已更改");
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ addImgCarousel(){
|
|
|
+ this.$refs.dialogForm.validate((valid) => {
|
|
|
+ //console.log(...this.dialogForm)
|
|
|
+ if (valid) {
|
|
|
+ this.dialogForm.imgCarouselUrl = "http://hg.zfire.top/api/img/get?key=" + this.fileList[0].url
|
|
|
+ const params = {
|
|
|
+ ...this.dialogForm,
|
|
|
+ };
|
|
|
+ addImgCarousel(params).then((res) => {
|
|
|
+ this.$successMsg("添加成功");
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加公司信息
|
|
|
+ addComPany(){
|
|
|
+
|
|
|
+ //console.log(...this.dialogForm)
|
|
|
+ const params = {
|
|
|
+ ...this.comPanyDialogForm,
|
|
|
+ };
|
|
|
+ addCompany(params).then((res) => {
|
|
|
+ this.$successMsg("添加成功");
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ handelInfo() {
|
|
|
+ if (this.type == 1) {
|
|
|
+ this.$refs.dialogForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const params = {
|
|
|
+ ...this.dialogForm,
|
|
|
+ };
|
|
|
+ addData(params).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.$successMsg("添加成功");
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (this.type == 0) {
|
|
|
+ const upParams = {
|
|
|
+ ...this.dialogForm,
|
|
|
+ };
|
|
|
+ updateType(upParams).then((res) => {
|
|
|
+ this.$successMsg("修改成功");
|
|
|
+
|
|
|
+ this.hanleReset();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs.dialogForm.resetFields();
|
|
|
+ },
|
|
|
+ hanleReset() {
|
|
|
+ this.dialogForm = {
|
|
|
+ companyRecordManageId: "",
|
|
|
+ imgCarouselName: "",
|
|
|
+ imgCarouselUrl: "",
|
|
|
+ imgCarouselOrder: "",
|
|
|
+ status: "1"
|
|
|
+ };
|
|
|
+ // this.$refs.dialogForm.resetFields()
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Pagination,
|
|
|
+ ImageUpload
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .el-switch.is-disabled {
|
|
|
+ opacity: inherit;
|
|
|
+ }
|
|
|
+ .page-header{
|
|
|
+ font-size: 18px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .cname-footer{
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .my-form{
|
|
|
+ width :60%
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
xiaomj