VehicleClassification/vue/src/views/RecordList.vue

<template>
  <div class="search-form">
    <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input v-model="organName" placeholder="请输入用户姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOrginizeList">查询</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      </el-form-item>
    </el-form> -->
  </div>
  <el-table
    :data="orginizeList"
    border
    style="width: 100%"
    :highlight-current-row="true"
    :header-cell-style="{ background: '#ecf7f9' }"
  >
    <el-table-column prop="FileName" label="文件名称" />
    <el-table-column prop="FileType" label="文件类型" />
    <el-table-column prop="TaskType" label="检测类型" :formatter='typeFunformatter' />
    <el-table-column prop="CreateTime" label="创建时间" />
    <!-- <el-table-column prop="UserName" label="用户名" /> -->
    <el-table-column prop="Result" label="解析结果" />
    <!-- <el-table-column fixed="right" label="操作" width="200" align="center">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" size="small" plain @click="editHandle(scope.row)">编辑</el-button>
        <el-button type="danger" :icon="Delete" size="small" @click="delHandle(scope.row.id)">删除</el-button>
      </template>
    </el-table-column> -->
  </el-table>
  <div class="pagination-box">
    <el-pagination
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
      small
      background
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    title="用户信息"
    width="480"
    @close="cancelHandle"
  >
    <el-form ref="ruleFormRef" :model="orginizeInfo" :rules="rules">
      <el-form-item label="姓名" :label-width="120" prop="organName">
        <el-input v-model="orginizeInfo.organName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="编号" :label-width="120" prop="organNumber">
        <el-input
          v-model.number="orginizeInfo.organNumber"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="联系电话" :label-width="120" prop="contactNumber">
        <el-input
          v-model="orginizeInfo.contactNumber"
          maxlength="11"
          type="tel"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="登录密码" :label-width="120" prop="password">
        <el-input
          v-model="orginizeInfo.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="saveOriginize(ruleFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script lang="ts" setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "../utils/http";
import CryptoJS from "crypto-js";

let pageNum = ref(1);
let pageSize = ref(10);
let totalSize = ref(0);
let organName = ref("");
let dialogFormVisible = ref(false);
let orginizeList = ref([]);
let orginizeInfo = reactive({
  id: "",
  organName: "",
  contactNumber: "",
  contactName: "",
  organNumber: "",
  type: 1,
  password: "",
});

const ruleFormRef = ref();

const typeFunformatter=(val:any)=>{
  if(val.TaskType=='class_direc'){
    return '车辆分类与方向检测'
  }else if(val.TaskType=='car_direction'){
    return '车辆方向检测'
  }else if(val.TaskType=='car_classification'){
    return '车辆分类检测'
  }else{
    return ''
  }
}

const validateTel = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入联系电话"));
  } else {
    if (!/^1[3456789]\d{9}$/.test(value)) {
      callback(new Error("请输入正确的手机号码"));
      return;
    }
    callback();
  }
};
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,12}$/;
    if (!reg.test(value)) {
      callback(new Error("密码需为6~12位的字母数字组合"));
      return;
    }
    callback();
  }
};

const rules = reactive({
  organName: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
  organNumber: [
    {
      required: true,
      message: "请输入机构编号",
      trigger: "blur",
    },
    { type: "number", message: "机构编号需为数字", trigger: "blur" },
  ],
  contactNumber: [
    {
      required: true,
      validator: validateTel,
      trigger: "blur",
    },
  ],
  contactName: [
    {
      required: true,
      message: "请输输入联系人名称",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      validator: validatePass,
      trigger: "blur",
    },
  ],
});

onMounted(() => {
  getOrginizeList();
});

// 查询机构列表
const getOrginizeList = () => {
  // sessionStorage.setItem("userInfo", JSON.stringify({organName:form.userName,type:type.value}));
  let name = JSON.parse(sessionStorage.getItem("userInfo")).organName;

  let role = JSON.parse(sessionStorage.getItem("userInfo")).type;
  axios
    .post(`/v1/record/find`, {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      userName: name,
      role: role,
    })
    .then((res) => {
      if (res.code == 200) {
        orginizeList.value = res.data.data;
        totalSize.value = res.data.total;
        dialogFormVisible.value = false;
      }
    })
    .catch((err) => {});
};

// 保存机构信息
const saveOriginize = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      orginizeInfo.password = CryptoJS.MD5(orginizeInfo.password).toString();
      axios
        .post(`/organ/saveInfo`, orginizeInfo)
        .then((res) => {
          if (res.code == 200) {
            ElMessage({
              message: "保存成功",
              type: "success",
            });
            orginizeInfo = {
              id: "",
              organName: "",
              contactNumber: "",
              contactName: "",
              organNumber: "",
              type: 1,
              password: "",
            };
            getOrginizeList();
            dialogFormVisible.value = false;
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg,
            type: "error",
          });
        });
    } else {
      ElMessage({
        message: "请将信息填写完整",
        type: "error",
      });
    }
  });
};

const cancelHandle = () => {
  ruleFormRef.value.resetFields();
  dialogFormVisible.value = false;
  ruleFormRef.value.clearValidate();
};

// 删除
const delHandle = (id) => {
  ElMessageBox.alert("确定要删除该条数据", {
    confirmButtonText: "确定",
    callback: (action) => {
      if ("confirm" === action) delOriginize(id);
    },
  });
};

const editHandle = (info) => {
  orginizeInfo = info;
  dialogFormVisible.value = true;
};

// 删除机构信息
const delOriginize = (id) => {
  axios
    .delete(`/organ/delete/${id}`)
    .then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getOrginizeList();
      }
    })
    .catch((err) => {});
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getOrginizeList();
};
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  getOrginizeList();
};

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const formInline = reactive({
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};
</script>
  
<style></style>