335 lines
10 KiB
Vue
335 lines
10 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2023-01-11 09:24:58
|
||
* @LastEditTime: 2023-06-21 16:52:20
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-card shadow="never" class="aui-card--fill">
|
||
<div class="mod-sys__user">
|
||
<SearchBar :formConfigs="formConfig" ref="ruleForm" @headBtnClick="buttonClick">
|
||
<el-badge :value="6" class="item">
|
||
<el-button type="primary" size="small" @click="conditionSearch">条件搜索</el-button>
|
||
</el-badge>
|
||
</SearchBar>
|
||
<base-table :table-props="tableProps" :page="listQuery.page" :limit="listQuery.limit" :table-data="tableData">
|
||
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
|
||
@clickBtn="handleClick" />
|
||
</base-table>
|
||
<pagination :limit.sync="listQuery.limit" :page.sync="listQuery.page" :total="listQuery.total"
|
||
@pagination="getDataList" />
|
||
<!-- 弹窗, 新增 / 修改 -->
|
||
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel"
|
||
@confirm="handleConfirm" :before-close="handleCancel">
|
||
<gapeGrs-add ref="addOrUpdate" @refreshDataList="successSubmit">
|
||
</gapeGrs-add>
|
||
</base-dialog>
|
||
<base-dialog :dialogTitle="searchOrEditTitle" :dialogVisible="searchOrUpdateVisible" @cancel="handleSearchCancel"
|
||
@confirm="handleSearchConfirm" :before-close="handleSearchCancel">
|
||
<gage-search ref="searchOrUpdate" @refreshDataList="conditionSearchSubmit"></gage-search>
|
||
<el-row slot="footer" type="flex" justify="end">
|
||
<el-col :span="12">
|
||
<el-button size="small" type="primary" plain class="btnTextStyle" @click="handleSearchCancel">
|
||
{{ $t("close") }}
|
||
</el-button>
|
||
<el-button size="small" class="btnTextStyle" type="primary" plain @click="handleSearchReset">{{ $t("reset")
|
||
}}</el-button>
|
||
<el-button type="primary" size="small" class="btnTextStyle" @click="handleSearchConfirm">
|
||
{{ $t("search") }}
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</base-dialog>
|
||
<el-dialog :title="$t('gage.report')" :visible.sync="dialogTableVisible">
|
||
<el-table :show-header="false" :data="data" :span-method="objectSpanMethod" border :cell-style="columnStyle"
|
||
style="width: 100%; margin-top: 20px">
|
||
<el-table-column width="180" prop="name"></el-table-column>
|
||
<el-table-column prop="amount1"></el-table-column>
|
||
<el-table-column width="180" prop="amount2"></el-table-column>
|
||
<el-table-column prop="amount3"></el-table-column>
|
||
<el-table-column prop="amount4"></el-table-column>
|
||
<el-table-column prop="amount5"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import basicPage from "@/mixins/basic-page"
|
||
import gapeGrsAdd from "./components/gageGrs-add"
|
||
import gageSearch from "./components/gageSearch"
|
||
import basicSearch from "@/mixins/basic-search"
|
||
import { timeFormatter } from '@/filters'
|
||
import i18n from "@/i18n"
|
||
const tableProps = [
|
||
{
|
||
prop: 'itemNo',
|
||
label: i18n.t("gage.itemNo"),
|
||
align: 'center'
|
||
},
|
||
{
|
||
prop: 'partName',
|
||
label: i18n.t("gage.partName"),
|
||
align: 'center'
|
||
},
|
||
{
|
||
prop: 'gageName',
|
||
label: i18n.t("gage.gageName"),
|
||
align: 'center'
|
||
},
|
||
{
|
||
prop: 'specification',
|
||
label: i18n.t("gage.measuringToolSpecification"),
|
||
align: 'center'
|
||
},
|
||
// {
|
||
// prop: 'measurementTime',
|
||
// label: i18n.t("gage.measurementTime"),
|
||
// align: 'center'
|
||
// },
|
||
{
|
||
prop: 'measurementTime',
|
||
label: i18n.t("gage.measurementTime"),
|
||
align: 'center',
|
||
filter: timeFormatter,
|
||
|
||
},
|
||
|
||
]
|
||
const tableBtn = [
|
||
{
|
||
type: "edit",
|
||
btnName: i18n.t("edit"),
|
||
},
|
||
{
|
||
type: "delete",
|
||
btnName: i18n.t("delete"),
|
||
},
|
||
{
|
||
type: "report",
|
||
btnName: i18n.t("gage.report"),
|
||
},
|
||
{
|
||
type: "parameter",
|
||
btnName: i18n.t("parameter"),
|
||
},
|
||
];
|
||
export default {
|
||
mixins: [basicPage, basicSearch],
|
||
components: {
|
||
gageSearch,
|
||
gapeGrsAdd
|
||
},
|
||
computed: {
|
||
//因为数据用到了dataform中的数据，所以写在了computed中
|
||
data() {
|
||
return [
|
||
{
|
||
name: i18n.t("gage.partName"),
|
||
amount1: this.dataForm.partName,
|
||
amount2: i18n.t("gage.gageName"),
|
||
amount3: this.dataForm.gageName,
|
||
amount4: i18n.t("gage.measurementTime"),
|
||
amount5: this.dataForm.measurementTime
|
||
},
|
||
{
|
||
name: i18n.t("gage.itemNo"),
|
||
amount1: this.dataForm.itemNo,
|
||
amount2: i18n.t("gage.model"),
|
||
amount3: this.dataForm.model,
|
||
amount4: i18n.t("gage.measurementTime"),
|
||
amount5: this.dataForm.measurementTime
|
||
},
|
||
{
|
||
name: i18n.t("gage.measuringToolSpecification"),
|
||
amount1: this.dataForm.measuringToolSpecification,
|
||
amount2: i18n.t("gage.measuringToolAccuracy"),
|
||
amount3: this.dataForm.measuringToolAccuracy,
|
||
amount4: i18n.t("gage.process"),
|
||
amount5: this.dataForm.process
|
||
},
|
||
// {
|
||
// name: i18n.t("gage.partName"),
|
||
// amount1: this.dataForm.partName,
|
||
// amount2: i18n.t("gage.gageName"),
|
||
// amount3: this.dataForm.gageName,
|
||
// amount4: i18n.t("gage.measurementTime"),
|
||
// amount5: this.dataForm.measurementTime
|
||
// },
|
||
];
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
urlOptions: {
|
||
getDataListURL: "/gage/qmsGageGrr/page",
|
||
deleteURL: "/gage/qmsGageGrr",
|
||
exportUrl: '/gage/qmsGageGrr/export'
|
||
},
|
||
dialogTableVisible:false,
|
||
tableProps,
|
||
dataForm: {},
|
||
tableBtn,
|
||
searchOrEditTitle: '',
|
||
searchOrUpdateVisible: false,
|
||
formConfig: [
|
||
// {
|
||
// type: "",
|
||
// label: i18n.t("params.paramCode"),
|
||
// placeholder: i18n.t("params.paramCode"),
|
||
// param: "paramCode",
|
||
// },
|
||
// {
|
||
// type: "separate",
|
||
// },
|
||
{
|
||
type: "button",
|
||
btnName: i18n.t('add'),
|
||
name: "add",
|
||
color: "primary",
|
||
},
|
||
{
|
||
type: "button",
|
||
btnName: i18n.t('export'),
|
||
name: "export",
|
||
color: "primary",
|
||
},
|
||
{
|
||
type: "button",
|
||
btnName: i18n.t('search'),
|
||
name: "search",
|
||
color: "primary",
|
||
}
|
||
],
|
||
};
|
||
},
|
||
// components: {
|
||
// AddOrUpdate,
|
||
// },
|
||
methods: {
|
||
columnStyle({ row, column, rowIndex, columnIndex }) {
|
||
console.log(rowIndex)
|
||
if (columnIndex == 0 || columnIndex == 2 || columnIndex == 4) {
|
||
//第三第四列的背景色就改变了2和3都是列数的下标
|
||
return "background:#f3f6fc;";
|
||
} else {
|
||
return "background:#ffffff;";
|
||
}
|
||
},
|
||
// 和并列
|
||
// objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
// if (columnIndex === 0) {
|
||
// if (rowIndex % 4 === 0) {
|
||
// return {
|
||
// rowspan: 4,
|
||
// colspan: 1
|
||
// };
|
||
// } else {
|
||
// return {
|
||
// rowspan: 0,
|
||
// colspan: 0
|
||
// };
|
||
// }
|
||
// }
|
||
// },
|
||
//search-bar点击
|
||
handleProductCancel() {
|
||
this.productOrUpdateVisible = false;
|
||
this.productOrEditTitle = "";
|
||
},
|
||
// handleSearchCancel() {
|
||
// this.searchOrEditTitle = "";
|
||
// this.searchOrUpdateVisible = false;
|
||
// },
|
||
conditionSearch() {
|
||
this.searchOrEditTitle = "搜索";
|
||
this.searchOrUpdateVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.searchOrUpdate.init();
|
||
});
|
||
},
|
||
conditionSearchSubmit(dataForm) {
|
||
this.listQuery.code = dataForm.code
|
||
this.listQuery.name = dataForm.name
|
||
this.listQuery.measuringToolAccuracy = dataForm.measuringToolAccuracy
|
||
this.listQuery.gageStatus = dataForm.gageStatus
|
||
this.listQuery.belongPerson = dataForm.belongPerson
|
||
this.listQuery.gageTypeId = dataForm.gageTypeId
|
||
this.listQuery.page = 1;
|
||
this.getDataList();
|
||
this.searchOrUpdateVisible = false;
|
||
// console.log(11111);
|
||
// this.conditionSearchSubmit();
|
||
},
|
||
handleClick(val) {
|
||
console.log(val);
|
||
if (val.type === "delete") {
|
||
this.$confirm(`确定对[名称=${val.data.name}]进行删除操作?`, "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
this.$http.delete(this.urlOptions.deleteURL, { data: [val.data.id] }).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.getDataList();
|
||
},
|
||
});
|
||
} else {
|
||
this.$message.error(data.msg);
|
||
}
|
||
});
|
||
})
|
||
.catch(() => { });
|
||
} else if (val.type === 'edit') {
|
||
this.addOrUpdateVisible = true
|
||
this.addOrEditTitle = this.$t('edit')
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdate.init(val.data.id);
|
||
});
|
||
} else if (val.type === 'parameter') {
|
||
this.$router.push({
|
||
name: 'gage-qmsGageTypeDifferenceParameter',
|
||
query: {
|
||
gageTypeId: val.data.gageTypeId
|
||
}
|
||
})
|
||
} else if (val.type === 'report') {
|
||
this.dialogTableVisible = true
|
||
this.dataForm = val.data
|
||
console.log(val.data)
|
||
}
|
||
},
|
||
buttonClick(val) {
|
||
switch (val.btnName) {
|
||
case "search":
|
||
// this.listQuery.paramCode = val.paramCode;
|
||
this.listQuery.page = 1
|
||
this.getDataList();
|
||
break;
|
||
case "export":
|
||
// this.listQuery.paramCode = val.paramCode;
|
||
this.listQuery.page = 1
|
||
this.exportHandle();
|
||
break;
|
||
case "add":
|
||
this.addOrEditTitle = '新增'
|
||
this.addOrUpdateVisible = true;
|
||
this.addOrUpdateHandle()
|
||
break;
|
||
default:
|
||
console.log(val)
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|