556 lines
13 KiB
Vue
556 lines
13 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-date-picker
|
|
v-model="query.year"
|
|
type="year"
|
|
format="YYYY"
|
|
value-format="YYYY"
|
|
placeholder="年份"
|
|
class="headerSearch"
|
|
/>
|
|
<el-select
|
|
v-model="query.mgroup"
|
|
placeholder="关联工段"
|
|
clearable
|
|
class="headerSearch"
|
|
>
|
|
<el-option
|
|
v-for="item in mgroupOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select
|
|
v-model="query.goal_cate"
|
|
placeholder="目标种类"
|
|
clearable
|
|
class="headerSearch"
|
|
>
|
|
<el-option
|
|
v-for="item in goalOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="handleQuery"
|
|
></el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="roleAdd"
|
|
v-auth="'goal.create'"
|
|
></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable
|
|
ref="table"
|
|
:apiObj="apiObj"
|
|
row-key="id"
|
|
@selection-change="selectionChange"
|
|
>
|
|
<el-table-column
|
|
label="#"
|
|
type="index"
|
|
width="50"
|
|
fixed="left"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="工段"
|
|
prop="mgroup_name"
|
|
width="90"
|
|
fixed="left"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="目标（项目）"
|
|
prop="goal_cate_name"
|
|
width="190"
|
|
fixed="left"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="年份"
|
|
prop="year"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="1月"
|
|
prop="goal_val_1"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="2月"
|
|
prop="goal_val_2"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="3月"
|
|
prop="goal_val_3"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="4月"
|
|
prop="goal_val_4"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="5月"
|
|
prop="goal_val_5"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="6月"
|
|
prop="goal_val_6"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="7月"
|
|
prop="goal_val_7"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="8月"
|
|
prop="goal_val_8"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="9月"
|
|
prop="goal_val_9"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="10月"
|
|
prop="goal_val_10"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="11月"
|
|
prop="goal_val_11"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="12月"
|
|
prop="goal_val_12"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="年目标值"
|
|
prop="goal_val"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
fixed="right"
|
|
align="center"
|
|
width="100"
|
|
>
|
|
<template #default="scope">
|
|
<el-button
|
|
link
|
|
size="small"
|
|
@click="roleEdit(scope.row)"
|
|
v-auth="'goal.update'"
|
|
type="primary"
|
|
>编辑</el-button
|
|
>
|
|
<!-- <el-divider direction="vertical"></el-divider> -->
|
|
<el-popconfirm
|
|
title="确定删除吗？"
|
|
@confirm="handleDel(scope.row)"
|
|
>
|
|
<template #reference>
|
|
<el-button
|
|
link
|
|
size="small"
|
|
v-auth="'goal.delete'"
|
|
type="danger"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog :title="titleMap[type]" v-model="limitedVisible">
|
|
<el-form
|
|
:model="form"
|
|
:rules="rules"
|
|
ref="addForm"
|
|
label-width="100px"
|
|
style="padding: 0 10px"
|
|
>
|
|
<el-row>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="年份" prop="year">
|
|
<el-date-picker
|
|
:disabled="type === 'edit'"
|
|
v-model="form.year"
|
|
type="year"
|
|
format="YYYY"
|
|
value-format="YYYY"
|
|
placeholder="年份"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="关联工段" prop="mgroup">
|
|
<el-select
|
|
:disabled="type == 'edit'"
|
|
v-model="form.mgroup"
|
|
placeholder="关联工段"
|
|
clearable
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in mgroupOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="目标种类" prop="goal_cate">
|
|
<el-select
|
|
:disabled="type == 'edit'"
|
|
v-model="form.goal_cate"
|
|
placeholder="目标种类"
|
|
clearable
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in goalOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="年目标值" prop="goal_val">
|
|
<el-input-number
|
|
v-model="form.goal_val"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="1月目标值" prop="goal_val_1">
|
|
<el-input-number
|
|
v-model="form.goal_val_1"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="2月目标值" prop="goal_val_2">
|
|
<el-input-number
|
|
v-model="form.goal_val_2"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="3月目标值" prop="goal_val_3">
|
|
<el-input-number
|
|
v-model="form.goal_val_3"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="4月目标值" prop="goal_val_4">
|
|
<el-input-number
|
|
v-model="form.goal_val_4"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="5月目标值" prop="goal_val_5">
|
|
<el-input-number
|
|
v-model="form.goal_val_5"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="6月目标值" prop="goal_val_6">
|
|
<el-input-number
|
|
v-model="form.goal_val_6"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="7月目标值" prop="goal_val_7">
|
|
<el-input-number
|
|
v-model="form.goal_val_7"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="8月目标值" prop="goal_val_8">
|
|
<el-input-number
|
|
v-model="form.goal_val_8"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="9月目标值" prop="goal_val_9">
|
|
<el-input-number
|
|
v-model="form.goal_val_9"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="10月目标值" prop="goal_val_10">
|
|
<el-input-number
|
|
v-model="form.goal_val_10"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="11月目标值" prop="goal_val_11">
|
|
<el-input-number
|
|
v-model="form.goal_val_11"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-form-item label="12月目标值" prop="goal_val_12">
|
|
<el-input-number
|
|
v-model="form.goal_val_12"
|
|
style="width: 100%"
|
|
clearable
|
|
:min="0"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="limitedVisible = false">取 消</el-button>
|
|
<el-button
|
|
v-if="type !== 'show'"
|
|
type="primary"
|
|
:loading="isSaving"
|
|
@click="submitHandle()"
|
|
>保 存</el-button
|
|
>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
const defaultForm = {
|
|
year: [{ required: true, message: "请选择年份" }],
|
|
mgroup: "",
|
|
year: "",
|
|
goal_cate: "",
|
|
goal_val: "",
|
|
goal_val_1: "",
|
|
goal_val_2: "",
|
|
goal_val_3: "",
|
|
goal_val_4: "",
|
|
goal_val_5: "",
|
|
goal_val_6: "",
|
|
goal_val_7: "",
|
|
goal_val_8: "",
|
|
goal_val_9: "",
|
|
goal_val_10: "",
|
|
goal_val_11: "",
|
|
goal_val_12: "",
|
|
};
|
|
export default {
|
|
name: "dept",
|
|
data() {
|
|
return {
|
|
apiObj: this.$API.mtm.goal.list,
|
|
search: {
|
|
keyword: null,
|
|
},
|
|
query: {},
|
|
isSaving: false,
|
|
limitedVisible: false,
|
|
checkStrictly: true,
|
|
type: "add",
|
|
titleMap: {
|
|
add: "新增月度年度目标值",
|
|
edit: "编辑月度年度目标值",
|
|
show: "查看月度年度目标值",
|
|
},
|
|
//表单数据
|
|
form: {},
|
|
//验证规则
|
|
rules: {
|
|
year: [{ required: true, message: "请选择年份" }],
|
|
mgroup: [{ required: true, message: "请选择关联工段" }],
|
|
goal_cate: [{ required: true, message: "请选择目标种类" }],
|
|
goal_val: [{ required: true, message: "请填写年目标值" }],
|
|
goal_val_1: [{ required: true, message: "请填写1月份目标值" }],
|
|
goal_val_2: [{ required: true, message: "请填写2月份目标值" }],
|
|
goal_val_3: [{ required: true, message: "请填写3月份目标值" }],
|
|
goal_val_4: [{ required: true, message: "请填写4月份目标值" }],
|
|
goal_val_5: [{ required: true, message: "请填写5月份目标值" }],
|
|
goal_val_6: [{ required: true, message: "请填写6月份目标值" }],
|
|
goal_val_7: [{ required: true, message: "请填写7月份目标值" }],
|
|
goal_val_8: [{ required: true, message: "请填写8月份目标值" }],
|
|
goal_val_9: [{ required: true, message: "请填写9月份目标值" }],
|
|
goal_val_10: [
|
|
{ required: true, message: "请填写10月份目标值" },
|
|
],
|
|
goal_val_11: [
|
|
{ required: true, message: "请填写11月份目标值" },
|
|
],
|
|
goal_val_12: [
|
|
{ required: true, message: "请填写12月份目标值" },
|
|
],
|
|
},
|
|
goalOptions: [],
|
|
mgroupOptions: [],
|
|
productList: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getMgroup();
|
|
this.getGoals(); //目标种类
|
|
console.log(this.$route.query.mgroup);
|
|
if (this.$route.query.mgroup){
|
|
this.query.mgroup = this.$route.query.mgroup;
|
|
this.handleQuery();
|
|
}
|
|
},
|
|
methods: {
|
|
//目标种类
|
|
getGoals() {
|
|
let that = this;
|
|
this.$API.system.dict.list
|
|
.req({ page: 0, type__code: "goal_cate" })
|
|
.then((res) => {
|
|
debugger;
|
|
console.log(res);
|
|
that.goalOptions = res;
|
|
});
|
|
},
|
|
//获取工段列表
|
|
getMgroup() {
|
|
this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
|
|
this.mgroupOptions = res;
|
|
});
|
|
},
|
|
//添加目标
|
|
roleAdd() {
|
|
this.limitedVisible = true;
|
|
this.type = "add";
|
|
this.form = {};
|
|
this.form = Object.assign({}, defaultForm);
|
|
},
|
|
submitHandle() {
|
|
let that = this;
|
|
this.$refs.addForm.validate((valid) => {
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
if (this.type === "add") {
|
|
this.$API.mtm.goal.create.req(that.form).then((res) => {
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
});
|
|
} else {
|
|
this.$API.mtm.goal.update
|
|
.req(that.form.id, that.form)
|
|
.then((res) => {
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//编辑目标
|
|
roleEdit(row) {
|
|
this.type = "edit";
|
|
this.form = {};
|
|
this.form = Object.assign(defaultForm, row);
|
|
this.form.year = row.year + "";
|
|
this.limitedVisible = true;
|
|
},
|
|
|
|
//删除目标
|
|
async handleDel(row) {
|
|
var id = row.id;
|
|
var res = await this.$API.mtm.goal.delete.req(id);
|
|
if (res.err_msg) {
|
|
this.$message.error(res.err_msg);
|
|
} else {
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功");
|
|
}
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection) {
|
|
this.selection = selection;
|
|
},
|
|
//搜索
|
|
handleQuery() {
|
|
this.$refs.table.queryData(this.query);
|
|
},
|
|
//本地更新数据
|
|
handleSaveSuccess() {
|
|
this.$refs.table.refresh();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.treeMain {
|
|
width: 100%;
|
|
height: 280px;
|
|
overflow: auto;
|
|
border: 1px solid #dcdfe6;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|