admin-ui/src/views/iot/projects/list/index.vue

<template>
  <div class="page">
    <el-card shadow="never">
      <div class="search">
        <el-form inline>
          <el-form-item>
            <el-input v-model="params.channelMerchants" style="width: 200px;" placeholder="渠道商搜索" @keyup.enter.native="getList(1)" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="params.status" placeholder="请选择转发格式" style="width: 100px">
              <el-option label="全部状态" :value="-1"> </el-option>
              <el-option label="正常" :value="1"> </el-option>
              <el-option label="禁用" :value="0"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList(1)">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button @click="resetQuery()">
              <el-icon>
                <ele-Refresh />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-auth="'add'" @click="addOrEdit()">
              <el-icon>
                <ele-FolderAdd />
              </el-icon>
              新增
            </el-button>
            <el-button type="danger" v-auth="'del'" :disabled="!ids.length" @click="del()">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="status" label="项目状态" width="100" :formatter="(row: any) => row.status ? '正常' : '禁用'" align="center"></el-table-column>
        <el-table-column prop="name" v-col="'name'" label="项目名称" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" v-col="'address'" label="省/市/区/县" :formatter="(row: any) => JSON.parse(row.address)?.name" min-width="200" align="center"></el-table-column>
        <el-table-column prop="addressDetail" v-col="'addressDetail'" label="详细地址" min-width="100" align="center"></el-table-column>
        <el-table-column prop="channelMerchants" v-col="'channelMerchants'" label="渠道商" min-width="100" align="center"></el-table-column>
        <el-table-column prop="customName" v-col="'customName'" label="关键客户" min-width="100" align="center"></el-table-column>
        <el-table-column prop="repairCompany" v-col="'repairCompany'" label="维修公司" min-width="100" align="center"></el-table-column>
        <el-table-column prop="updatedAt" v-col="'updatedAt'" label="更新时间" width="165" align="center"></el-table-column>
        <el-table-column label="操作" width="160" v-col="'handle'" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" text style="margin-left: 0;" type="primary" v-auth="'detail'" @click="$router.push('/iotmanager/projects/list/' + row.code)">详情</el-button>
            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(row)">编辑</el-button>
            <el-button size="small" text type="primary" v-auth="'startOrStop'" @click="editStatus(row)">{{ row.status ? '禁用' : '启用' }}</el-button>
            <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
      <EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import api from '/@/api/projects';
import { useSearch } from '/@/hooks/useCommon';
import { ElMessageBox, ElMessage } from 'element-plus';
import getOrigin from '/@/utils/origin'
import EditForm from './edit-dialog.vue';
import { ref } from 'vue';

const editFormRef = ref();
const ids = ref<number[]>([]);

const { params, tableData, getList, loading, resetQuery } = useSearch<any[]>(api.list, 'Data', { channelMerchants: '' });

getList();

function getTokenUrl(url: string) {
  const tokenUrl = import.meta.env.VITE_TOPO_URL
  return getOrigin(tokenUrl + url)
}

const addOrEdit = (row?: any) => {
  if (row) {
    editFormRef.value.open(row);
    return;
  } else {
    editFormRef.value.open();
  }
};
const editStatus = (row: any) => {
  api.editStatus({ id: row.id, status: row.status ? 0 : 1 }).then(() => {
    ElMessage.success('操作成功')
    getList()
  })
};

// 多选框选中数据
const handleSelectionChange = (selections: any[]) => {
  ids.value = selections.map((item) => item.id);
};

const edit = (row: any) => {
  const url = getTokenUrl('#/editor/' + row.id);
  window.open(url);
};

const del = (row?: any) => {
  ElMessageBox.confirm(row ? `此操作将项目：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个项目`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await api.del(row ? [row.id] : ids.value);
    ElMessage.success('删除成功');
    getList(1);
  });
};
</script>