sac/sf-ui/src/views/FDS/publishList/index.vue

<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
      <el-form-item label="选择APP" prop="configName">
        <el-select v-model="queryParams.configType" clearable placeholder="请选择APP">
          <el-option
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input
            v-model="queryParams.version"
            clearable
            placeholder="请输入版本号"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="公开时间">
        <el-date-picker
            v-model="dateRange"
            end-placeholder="结束日期"
            range-separator="-"
            start-placeholder="开始日期"
            style="width: 240px"
            type="daterange"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>


      <el-form-item label="状态" prop="configType">
        <el-select v-model="queryParams.configType" clearable placeholder="请选择状态">
          <el-option
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            v-hasPermi="['system:config:add']"
            icon="el-icon-plus"
            plain
            size="mini"
            type="primary"
            @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            :disabled="multiple"
            icon="el-icon-plus"
            plain
            size="mini"
            type="info"
            @click="handlePublish"
        >批量发布
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            v-hasPermi="['system:config:add']"
            :disabled="multiple"
            icon="el-icon-plus"
            plain
            size="mini"
            type="info"
            @click="handleDelete"
        >批量删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="APP" prop="configId"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="文件类型" prop="configName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="版本号" prop="version"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="子版本号" prop="configValue"/>
      <el-table-column
          label="系统"
          min-width="80"
          prop="platform"
      >
        <template scope="scope">
          <div>{{ scope.row.platform === '0' ? '安卓' : 'IOS' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公开版" prop="createTime" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.tagsView" class="drawer-switch" disabled/>
        </template>
      </el-table-column>

      <el-table-column align="center" label="强制更新" prop="createTime" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.tagsView" class="drawer-switch" disabled/>
        </template>
      </el-table-column>

      <el-table-column align="center" label="上传时间" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="发布环境" prop="configValue"/>
      <el-table-column align="center" label="发布状态" prop="configType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
        </template>
      </el-table-column>

      <el-table-column align="center" label="公开时间" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="true" align="center" label="更新说明" prop="remark"/>
      <el-table-column
          align="center"
          label="二维码"
          min-width="80"
      >
        <template slot-scope="scope">

          <el-image
              :preview-src-list="srcList"
              :src="url"
              style="width: 80px; height: 80px"
          >
          </el-image>

          <!--          <el-popover-->
          <!--              v-if="scope.row.qrCode && scopeC.row.status !== '20'"-->
          <!--              ref="popver"-->
          <!--              trigger="click"-->
          <!--              width="200"-->
          <!--          >-->
          <!--            <div class="table-img">-->
          <!--              <img :src="'data:image/jpg;base64,'+ scope.row.qrCode">-->
          <!--              <p v-if="scopeC.row.verifyCode">密码:{{ scope.row.verifyCode }}</p>-->
          <!--            </div>-->
          <!--          </el-popover>-->
          <!--          <div v-else>-</div>-->
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
              v-hasPermi="['system:config:edit']"
              icon="el-icon-bottom"
              size="mini"
              type="text"
              @click="handleDown(scope.row)"
          >下架
          </el-button>
          <el-button
              v-hasPermi="['system:config:edit']"
              icon="el-icon-edit"
              size="mini"
              type="text"
              @click="handleEdit(scope.row)"
          >修改
          </el-button>
          <el-dropdown size="mini"
                       @command="(command) => handleCommand(command, scope.row)"
          >
            <el-button icon="el-icon-d-arrow-right" size="mini" type="text">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPermi="['system:user:resetPwd']" command="handleDetail"
                                icon="el-icon-view"
              >详情
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['system:user:edit']" command="handleDownload"
                                icon="el-icon-download"
              >下载安装包
              </el-dropdown-item>

              <el-dropdown-item v-hasPermi="['system:user:edit']" command="handleDelete"
                                icon="el-icon-delete"
              >删除
              </el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :limit.sync="queryParams.pageSize"
        :page.sync="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

    <!--     新增白名单弹出框 -->
    <el-dialog :title="title" :visible.sync="addOpen" append-to-body width="700px">
      <el-form ref="formAdd" v-loading="$store.state.app.isLoading" :label-width="'120px'" :model="list"
               :rules="rules"
      >
        <el-form-item label="APP名称" prop="AppName">
          <el-input v-model="list.AppName" placeholder="输入APP名称"/>
        </el-form-item>
        <el-form-item label="上传类型" prop="">
          <el-input v-model="list.AppName" placeholder="请选择上传类型"/>
        </el-form-item>
        <el-form-item label="选择系统" prop="grayFlag">
          <div class="tag-group">
            <el-tag :type="list.platform=='android'?'':'info'" @click="list.platform='android'">安卓</el-tag>
            <el-tag :type="list.platform=='IOS'?'':'info'" @click="list.platform='IOS'">IOS</el-tag>
            <el-tag :type="list.platform=='HarmonyOS'?'':'info'" @click="list.platform='HarmonyOS'">鸿蒙</el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="list.platform!=='IOS'" label="安装包" prop="upgradeMode">
          <el-input v-model="list.packName" class="input-with-select" placeholder="请选择包" readonly>
            <el-button slot="append" icon="el-icon-search" @click="handlePackOpen"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item v-else label="APP Store地址" prop="AppLink">
          <el-input v-model="list.AppLink" placeholder="请输入APPStore地址"/>
        </el-form-item>
        <el-form-item label="版本号" prop="versionNumber">
          <el-input v-model="list.versionNumber" class="remark-input" maxlength="500" placeholder="输入版本号"
                    show-word-limit
          />
        </el-form-item>
        <el-form-item label="版本说明">
          <el-input v-model="list.imprint" class="remark-input" maxlength="500" placeholder="输入版本描述"
                    show-word-limit
                    type="textarea"
          />
        </el-form-item>
        <!--        根据需求确认是否需要这些条件-->
        <!--        <el-form-item label="发布环境" prop="releaseDestType">-->
        <!--          <el-radio v-model="list.releaseDestType" label="0">开发环境</el-radio>-->
        <!--          <el-radio v-model="list.releaseDestType" label="1">测试发布</el-radio>-->
        <!--          <el-radio v-model="list.releaseDestType" label="2">生产发布</el-radio>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="发布策略" prop="releaseDestType">-->
        <!--          <el-radio v-model="list.releaseDestType" label="0">灰度发布</el-radio>-->
        <!--          <el-radio v-model="list.releaseDestType" label="1">全量发布</el-radio>-->
        <!--          <el-radio v-model="list.releaseDestType" label="2">回滚发布</el-radio>-->
        <!--        </el-form-item>-->
        <el-form-item label="结果通知">
          <el-switch
              v-model="list.enableVerify"
          />
        </el-form-item>
        <el-form-item label="强制更新">
          <el-switch
              v-model="list.enableVerify"
          />
        </el-form-item>
        <el-form-item label="公开版">
          <el-switch
              v-model="list.enableVerify"
          />
        </el-form-item>
        <el-form-item label="下载验证">
                <span slot="label">
                  下载验证
                  <el-tooltip class="item-tooltip"
                              content="当验证开关开启时，为发布包生成下载二维码的同时，也会生成一个6位验证码，扫描二维码后需经过验证码才可下载发布."
                              effect="dark"
                              placement="right"
                  >
                    <i class="el-icon-question"/>
                  </el-tooltip>
                </span>
          <el-switch
              v-model="list.downVerifi"
          />
        </el-form-item>
        <el-form-item label="更新客群">
          <el-radio v-model="list.numType" label="0">白名单客户</el-radio>
          <el-radio v-model="list.numType" label="1">普通客户</el-radio>
        </el-form-item>
        <el-form-item label="有效期">
          <template>
            <div class="block">
              <el-date-picker
                  v-model="list.expiryTime"
                  end-placeholder="结束日期"
                  range-separator="-"
                  start-placeholder="开始日期"
                  style="width: 240px"
                  type="daterange"
                  value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="list.desp" class="remark-input" maxlength="50" placeholder="请输入备注" show-word-limit
                    type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(1)">保 存</el-button>
        <el-button @click="cancel(1)">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 发布详情 -->
    <el-dialog :visible.sync="configOpen" append-to-body title="发布详情" width="900px">
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="APP名称："></el-form-item>
            <el-form-item label="上传类型：">安装包11111</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所选系统：">安装包1111.excel</el-form-item>
            <el-form-item label="安装包名称：">58.1kb</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号：">安卓</el-form-item>
            <el-form-item label="子版本号：">登录模块</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本说明：">说明说明</el-form-item>
            <el-form-item label="发布环境：">发布环境</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布策略：">说明说明</el-form-item>
            <el-form-item label="结果通知：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="强制更新：">说明说明</el-form-item>
            <el-form-item label="公开版：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下载验证：">说明说明</el-form-item>
            <el-form-item label="更新客群：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下载地址：">说明说明</el-form-item>
            <el-form-item label="下载量：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册数：">说明说明</el-form-item>
            <el-form-item label="最后刷新：">说明说明</el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发布时间：">说明说明</el-form-item>
            <el-form-item label="创建人：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布状态：">说明说明</el-form-item>
            <el-form-item label="发布日志：">说明说明</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期：">说明说明</el-form-item>
            <el-form-item label="备注：">说明说明</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel(2)">关 闭</el-button>
      </div>
    </el-dialog>
    <!--安装包弹窗-->
    <el-dialog :visible.sync="packOpen" append-to-body title="添加安装包" width="900px">
      <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
        <el-form-item label="安装包名称" prop="installpackName">
          <el-input
              v-model="queryParams.installpackName"
              clearable
              placeholder="请输入安装包名称"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column align="center" label="安装包名称" prop="configId"/>
        <el-table-column :show-overflow-tooltip="true" align="center" label="版本号" prop="configName"/>
        <el-table-column :show-overflow-tooltip="true" align="center" label="安装包大小" prop="configName"/>
        <el-table-column :show-overflow-tooltip="true" align="center" label="适用系统" prop="configValue"/>
        <el-table-column align="center" label="状态" prop="configType">
          <template slot-scope="scopeA">
            <dict-tag :options="dict.type.sys_yes_no" :value="scopeA.row.type"/>
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-plus" type="primary"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="packOpen=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addConfig, delConfig, getConfig, listConfig, updateConfig } from '@/api/system/config'

export default {
  name: 'Config',
  dicts: ['sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: '',
      // 是否显示新增白名单弹出框
      addOpen: false,
      // 是否显示白名单配置弹出框
      configOpen: false,

      packOpen: false,

      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        configName: undefined,
        configKey: undefined,
        configType: undefined
      },
      // 表单参数
      form: {},
      url: require('@/assets/images/code.png'),
      srcList: [
        require('@/assets/images/code.png')
      ],
      list: {
        rule: {
          regularRule: false,
          customRule: false
        },
        // headerOperations: [],
        packId: '', // 安装包ID
        grayFlag: '0', // 发布类型: 0灰度 1正式
        upgradeMode: '0', //
        releaseDestType: '0', // 发布条件： 0白名单 1时间窗
        headerOperations: [// 自定义规则
          // {
          //   'scope': '', // 范围：region地区 platform平台
          //   'inclued': '', // 是否包含  1包含 2不包含
          //   'condition': '', // 发布条件
          //   'desp': ''// 备注
          // }
        ],
        grayUserNum: '', // 灰度人数
        numType: '0',
        expiryTime: '', // 灰度结束时间
        desp: '',
        releaseRuleId: '', // 常用规则
        // deviceListId: '', // 设备白名单
        whiteListId: '',// 用户白名单id
        enableVerify: false, //是否开启下载验证
        imprint: '', //版本说明
        versionNumber: '',
        AppName: '', //APP名称
        platform: 'android' //系统
      },
      whiteOptions: [],
      // 表单校验
      rules: {
        configName: [
          { required: true, message: '参数名称不能为空', trigger: 'blur' }
        ],
        configKey: [
          { required: true, message: '参数键名不能为空', trigger: 'blur' }
        ],
        configValue: [
          { required: true, message: '参数键值不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true
      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.configList = response.rows
            this.total = response.total
            this.loading = false
          }
      )
    },
    // 取消按钮
    cancel(type) {
      if (type === 1) {
        this.addOpen = false
      } else {
        this.configOpen = false
      }
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: 'Y',
        remark: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // 使用ES6+语法
      this.reset()
      this.addOpen = true

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.configId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const configId = row.configId || this.ids
      getConfig(configId).then(response => {
        this.form = response.data
        this.addOpen = true
        this.title = '修改白名单'
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.configId != undefined) {
            updateConfig(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.addOpen = false
              this.getList()
            })
          } else {
            addConfig(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.addOpen = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    async handleDelete(row) {
      const configIds = row.configId || this.ids
      try {
        await this.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？')
        await delConfig(configIds)
        this.getList()
        this.$modal.msgSuccess('删除成功')
      } catch (error) {
        console.error('删除失败', error)
        // 可以添加更多的错误处理逻辑，如用户提示等
      }
    },
    /**查看详情*/
    handleDetail() {
      this.configOpen = true
    },
    /**下载安装包*/
    handleDownload() {

    },
    /**********编辑*******/
    handleEdit() {

    },

    /** 发布操作*/
    handlePublish() {

    },
    /** 在上传之前进行校验 */
    beforeAvatarUpload(file) {
      const formatList = file.name.split('.')
      const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
      if (!isFormat) {
        this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过5M!`)
      }
      return isLt2M && isFormat
    },
    /** 上传文件 */
    handleSuccess(file) {
      this.fileList = []
      const nameList = file.context.path.split('/')
      this.fileList.push({
        name: file.context.name || nameList[nameList.length - 1],
        url: file.context.path
      })
      this.addFormData.path = file.context.path
    },
    beforeRemove(files, filesList) {
      return this.$confirm(`确定要移除${files.name}？`)
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDetail':
          this.handleDetail(row)
          break
        case 'handleDownload':
          this.handleDownload(row)
          break

        case 'handleDelete':
          this.handleDelete(row)
          break
        default:
          break
      }
    },

    /** 弹出包选择框*/
    handlePackOpen() {
      this.packOpen = true
    }

  }
}
</script>
<style lang="scss" scoped>
.tag-group {
  .el-tag {
    cursor: pointer;

  }
}

.el-tag + .el-tag {
  margin-left: 10px
}
</style>