123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375 |
- <template>
- <el-container>
- <el-row class="header">
- <el-button type="primary" @click="addRules">添加规则</el-button>
- </el-row>
- <div class="ruleContent" ref="ruleContent">
- <el-table
- ref="multipleTable"
- :data="checkDetail"
- border
- :max-height="tableMaxHeight"
- style="width: 100%"
- >
- <el-table-column prop="index" label="序号" width="50" align="center">
- </el-table-column>
- <el-table-column
- prop="name"
- label="是否检查"
- width="160"
- align="center"
- >
- <template slot-scope="scope">
- <el-radio v-model="scope.row.isCheck" :label="1">是</el-radio>
- <el-radio v-model="scope.row.isCheck" :label="0">否</el-radio>
- </template>
- </el-table-column>
- <el-table-column
- prop="checkContent"
- label="检查项"
- width="180"
- align="center"
- >
- <template slot-scope="scope">
- <!-- <div class="morerow" v-if="scope.row.children != undefined">
- <el-row v-for="(item, index) in scope.row.children" :key="index">
- <span> {{ item.checkContent }} </span>
- </el-row>
- </div>
- <span v-else> {{ scope.row.checkContent }} </span> -->
- <span> {{ scope.row.checkContent }} </span>
- </template>
- </el-table-column>
- <el-table-column prop="checkDescribe" label="描述" align="center">
- <template slot-scope="scope">
- <div class="morerow" v-if="scope.row.children != undefined">
- <el-row v-for="(item, index) in scope.row.children" :key="index">
- <span> {{ item.checkDescribe }} </span>
- </el-row>
- </div>
- <span v-else> {{ scope.row.checkDescribe }} </span>
- </template>
- </el-table-column>
- <el-table-column
- prop="fieldName"
- label="字段名称"
- width="200"
- align="center"
- >
- <template slot-scope="scope">
- <div class="morerow" v-if="scope.row.children != undefined">
- <el-row v-for="(item, index) in scope.row.children" :key="index">
- <el-input v-model="item.fieldName"></el-input>
- </el-row>
- </div>
- <el-input v-else v-model="scope.row.fieldName"></el-input>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <el-row>
- <!-- <el-button class="uploadbtn" type="primary" @click="uploadFile">
- 上传文件
- </el-button> -->
- <el-upload
- class="uploadbtn"
- ref="upload"
- accept=".json"
- :action="''"
- :auto-upload="true"
- :show-file-list="false"
- :limit="1"
- :before-upload="uploadFile"
- >
- <el-button type="primary" class="add-item">上传文件</el-button>
- </el-upload>
- </el-row>
- </el-container>
- </template>
- <script>
- import qualityApi from "@/api/qualityinspection";
- export default {
- data() {
- return {
- tableMaxHeight: 450,
- defaultField: {
- index: 1,
- isCheck: 1,
- checkContent: "数据完整性",
- checkDescribe:
- "检查所填字段数据是否完整(可填写多个字段,会动态扩展行数)",
- fieldName: "",
- delBtn: true,
- type: "dataIntegrality",
- },
- checkDefaultDetail: [
- {
- index: 1,
- isCheck: 1,
- checkContent: "数据完整性",
- checkDescribe:
- "检查所填字段数据是否完整(可填写多个字段,会动态扩展行数)",
- fieldName: "",
- delBtn: true,
- type: "dataIntegrality",
- },
- {
- index: 2,
- isCheck: 1,
- checkContent: "省级行政区划编码检查",
- checkDescribe: '验证是否是以"13"开头的纯数字的行政区划编码',
- fieldName: "",
- delBtn: false,
- type: "provinceCode",
- },
- {
- index: 3,
- isCheck: 1,
- checkContent: "市级行政区划编码检查",
- checkDescribe: '验证是否是以"13"开头的纯数字且至少4位的行政区划编码',
- fieldName: "",
- type: "cityCode",
- delBtn: false,
- },
- {
- index: 4,
- isCheck: 1,
- checkContent: "县级行政区划编码检查",
- checkDescribe: '验证是否是以"13"开头的纯数字且至少6位的行政区划编码',
- fieldName: "",
- type: "countyCode",
- delBtn: false,
- },
- {
- index: 5,
- isCheck: 1,
- checkContent: "经纬度验证",
- checkDescribe: "经纬度是否在河北省境内",
- fieldName: "",
- type: "latlon",
- delBtn: false,
- children: [
- {
- checkDescribe: "验证所需经度字段名",
- fieldName: "",
- type: "lon",
- delBtn: false,
- },
- {
- checkDescribe: "验证所需纬度字段名",
- fieldName: "",
- type: "lat",
- delBtn: false,
- },
- ],
- },
- {
- index: 6,
- isCheck: 1,
- checkContent: "行政区划+经纬度验证",
- checkDescribe:
- "检查经纬度点位是否在行政区划范围内部,例:经纬度为116.4,39.9的位置是否在石家庄范围内",
- fieldName: "",
- type: "areaLatlon",
- delBtn: false,
- children: [
- {
- checkDescribe: "验证所需行政区划编码字段名",
- fieldName: "",
- type: "areaCode",
- delBtn: false,
- },
- {
- checkDescribe: "验证所需经度字段名",
- fieldName: "",
- type: "lon",
- delBtn: false,
- },
- {
- checkDescribe: "验证所需纬度字段名",
- fieldName: "",
- type: "lat",
- delBtn: false,
- },
- ],
- },
- ],
- checkDetail: [],
- };
- },
- components: {},
- mounted() {
- let that = this;
- this.checkDetail = JSON.parse(JSON.stringify(this.checkDefaultDetail));
- setTimeout(() => {
- that.resizeWindowEvent();
- }, 100);
- },
- methods: {
- // 重置表格高度
- resizeWindowEvent() {
- let that = this;
- this.tableInterval = setInterval(() => {
- if (that.$refs["ruleContent"]) {
- that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
- clearInterval(that.tableInterval);
- }
- }, 100);
- window.onresize = () => {
- return (() => {
- if (that.$refs["ruleContent"])
- that.tableMaxHeight = that.$refs["ruleContent"].clientHeight;
- })();
- };
- },
- addRules() {
- let obj = JSON.parse(JSON.stringify(this.defaultField));
- this.checkDetail.unshift(obj);
- this.checkDetail = this.checkDetail.map(function (item, index) {
- item.index = index + 1;
- return item;
- });
- },
- uploadFile(file) {
- let that = this;
- // let ceshiObj = {};
- let obj = new FormData();
- let completeArr = [];
- for (let i = 0; i < this.checkDetail.length; i++) {
- let param = this.checkDetail[i];
- if (param.isCheck) {
- if (!param.children) {
- switch (param.type) {
- case "dataIntegrality":
- if (that.webMessage(param.fieldName, param.checkContent))
- return;
- completeArr.push(param.fieldName);
- break;
- default:
- if (that.webMessage(param.fieldName, param.checkContent))
- return;
- obj.append(param.type, param.fieldName);
- // ceshiObj[param.type] = param.fieldName;
- break;
- }
- } else {
- let arr = [];
- for (let k = 0; k < param.children.length; k++) {
- const item = param.children[k];
- if (that.webMessage(item.fieldName, item.checkContent)) return;
- arr.push(item.fieldName);
- }
- obj.append(param.type, arr);
- // ceshiObj[param.type] = arr;
- }
- }
- }
- if (completeArr.length > 0) {
- obj.append("dataIntegrality", completeArr);
- // ceshiObj["dataIntegrality"] = completeArr;
- }
- const loading = this.$createLoading("数据质检中,请稍后!");
- obj.append("file", file);
- qualityApi
- .uploadInspectionFile(obj)
- .then((result) => {
- loading.close();
- if (result.code == 200) {
- that
- .$confirm(result.content, "质检结果", {
- showConfirmButton: false,
- cancelButtonText: "关闭",
- type: "success",
- })
- .then(() => {})
- .catch(() => {});
- } else {
- that
- .$confirm(result.content, "质检结果", {
- showConfirmButton: false,
- cancelButtonText: "关闭",
- type: "error",
- })
- .then(() => {})
- .catch(() => {});
- }
- })
- .catch((err) => {
- loading.close();
- that.$message({
- type: "error",
- message: err,
- });
- });
- return false;
- },
- webMessage(fieldName, str) {
- if (fieldName == "") {
- this.$message({
- message: "请完善" + str,
- type: "warning",
- });
- return true;
- }
- return false;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .el-container {
- display: block;
- width: 100%;
- padding: 10px 20px;
- box-sizing: border-box;
- background: #ffffff;
- overflow: hidden;
- overflow-y: auto;
- .el-row {
- line-height: 40px;
- &::before {
- display: unset;
- }
- }
- .header {
- margin-bottom: 10px;
- }
- .ruleContent {
- height: calc(100% - 110px);
- }
- .el-table {
- /deep/ .el-table--border .el-table__cell:first-child .cell {
- padding-left: unset;
- }
- /deep/ .cell {
- padding-left: unset;
- padding-right: unset;
- }
- .el-input {
- margin: 0 10px;
- width: calc(100% - 20px);
- }
- .morerow {
- .el-row {
- padding-bottom: 10px;
- border-bottom: 1px solid #eeeeee;
- &:last-child {
- padding-top: 10px;
- padding-bottom: 0px;
- border-bottom: 0px;
- }
- }
- }
- }
- .uploadbtn {
- float: right;
- margin-top: 10px;
- margin-right: 20px;
- }
- }
- </style>
|