supply-front/src/views/pset/login_setting.vue

<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 @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="轮播图名称" prop="imgCarouselName" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="轮播图" prop="imgCarouselUrl" min-width="120" show-overflow-tooltip>
          <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 align="center" label="排序" prop="imgCarouselOrder" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
          <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"
            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 {
        getProductList,
        getImgCarouseList,
        handleImgIsShow,
        addImgCarousel,
        delImgData,
        addCompany,
        editImgCarousel,
        getCompanyList,
    } 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: 200,
                    },

                    {
                        prop: "imgCarouselOrder",
                        lable: "排序",
                        widht: 160,
                    },
                    {
                        prop: "createTime",
                        lable: "创建时间",
                        widht: 160,
                    },
                    {
                        prop: "status",
                        lable: "状态",
                        widht: 120,
                    },
                ],


                rules: {
                    imgCarouselName: [
                        { required: true, message: "请输入轮播图名称", trigger: "blur" },
                    ],
                    // saleName: [
                    //   { required: true, message: "请输入销售类型名称", trigger: "blur" },
                    // ],
                    // mainName: [
                    //   { required: true, message: "请输入品类名称", trigger: "blur" },
                    // ],
                },
                productList: [],
                fileList: [],
                multipleSelection: [],
            };
        },
        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,
                };
                getCompanyList().then((res) => {
                    if(res.data){
                          this.comPanyDialogForm.id = res.data[0].id,
                            this.comPanyDialogForm.icpRecord = res.data[0].icpRecord,
                            this.comPanyDialogForm.icpRecordLink= res.data[0].icpRecordLink,
                            this.comPanyDialogForm.pubSecurityRecord= res.data[0].pubSecurityRecord,
                            this.comPanyDialogForm.pubSecurityRecordLink = res.data[0].pubSecurityRecordLink,
                            this.comPanyDialogForm.companyName = res.data[0].companyName
                    }
                });

                getImgCarouseList(params).then((res) => {
                    this.dataList = res.data;
                    this.listLoading = false;
                });

            },
            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(){
                if (this.type == 1) {
                    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;
                        }
                    });
                } else if (this.type == 0) {
                    const upParams = {
                        ...this.dialogForm,
                    };
                    editImgCarousel(upParams).then((res) => {
                        this.$successMsg("修改成功");
                        this.hanleReset();
                    });
                } else {
                    this.dialogVisible = false;
                }
            },
            // 表格选择
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //添加公司信息
            addComPany(){
                const params = {
                    ...this.comPanyDialogForm,
                };
                addCompany(params).then((res) => {
                    this.$successMsg("添加成功");
                    this.hanleReset();
                });

            },
            resetForm(formName) {
                this.$refs.dialogForm.resetFields();
            },
            hanleReset() {
                this.dialogForm = {
                    companyRecordManageId: "",
                    imgCarouselName: "",
                    imgCarouselUrl: "",
                    imgCarouselOrder: "",
                    status: "1"
                };
                // this.$refs.dialogForm.resetFields()
                this.dialogVisible = false;
                this.getList();
            },
            batchDelete() {
                if(this.multipleSelection.length < 1) {
                    return this.$errorMsg('请选择信息');
                }
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = [];
                    this.multipleSelection.forEach(item => {
                        ids.push(item.id);
                    });
                    delImgData({ids: ids.join(',')}).then(res => {
                        this.$successMsg('删除成功');
                        this.hanleReset();
                    })
                }).catch(() => {});
            },

        },
        created() {
           // 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>