|
|
@@ -0,0 +1,279 @@
|
|
|
+<template>
|
|
|
+ <div class="classify">
|
|
|
+ <el-row :gutter="10" class="mb10">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="small" plain @click="addClassify">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="small" plain>修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="small" plain>删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="small" plain>启用</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" size="small" plain>停用</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-card>
|
|
|
+ <el-row :gutter="10" class="content">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input
|
|
|
+ placeholder="输入关键字进行过滤"
|
|
|
+ size="small"
|
|
|
+ v-model="filterText">
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <el-tree
|
|
|
+ class="filter-tree"
|
|
|
+ :data="data"
|
|
|
+ :props="defaultProps"
|
|
|
+ node-key="id"
|
|
|
+ @node-click="clickTree"
|
|
|
+ highlight-current
|
|
|
+ :default-expanded-keys="[1]"
|
|
|
+ :default-checked-keys="[2]"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree">
|
|
|
+ </el-tree>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="18">
|
|
|
+ <span class="title">基本信息</span>
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所属组织" prop="orgName">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.orgName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物料基本分类编码" prop="code">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.code"></el-input>
|
|
|
+ <span>编码规则x-xxx-xxx-xxx</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="物料基本分类名称" prop="materialType">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.materialType"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="平均单价" prop="averageCost">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.averageCost"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="平均成本" prop="averagePrice">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.averagePrice"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="平均采购提前期" prop="averagePurchaseAdvance">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.averagePurchaseAdvance"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="平均生产提前期" prop="zuzhi">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.zuzhi"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="启用状态" prop="isEnable">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.isEnable"
|
|
|
+ placeholder="启用状态"
|
|
|
+ clearable
|
|
|
+ :disabled="disable"
|
|
|
+ style="width: 230px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.material_enable"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="是否发生云彩" prop="zuzhi">
|
|
|
+ <el-input :disabled="disable" v-model="ruleForm.zuzhi"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span class="title">辅助属性</span>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="辅助属性结构" prop="delFlag">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.delFlag"
|
|
|
+ placeholder="属性结构"
|
|
|
+ clearable
|
|
|
+ :disabled="disable"
|
|
|
+ style="width: 230px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.sys_assist_condtion"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <el-checkbox-group :disabled="disable" v-model="checkList">
|
|
|
+ <el-checkbox label="库存状态"></el-checkbox>
|
|
|
+ <el-checkbox label="项目"></el-checkbox>
|
|
|
+ <el-checkbox label="供应商"></el-checkbox>
|
|
|
+ <el-checkbox label="生产厂商"></el-checkbox>
|
|
|
+ <el-checkbox label="客户"></el-checkbox>
|
|
|
+ <el-checkbox label="特征码"></el-checkbox>
|
|
|
+ <el-checkbox label="产品批号"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item v-if="!disable">
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
|
|
+ <el-button @click="resetForm('ruleForm')">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getTree, getDetail, add } from '@/api/classify/basic';
|
|
|
+export default {
|
|
|
+ name:'classify',
|
|
|
+ dicts: ['material_enable'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filterText: '',
|
|
|
+ data: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'childrens',
|
|
|
+ label: 'materialType'
|
|
|
+ },
|
|
|
+ ruleForm: {
|
|
|
+ orgName:'',
|
|
|
+ code: '',
|
|
|
+ materialType: '',
|
|
|
+ averageCost: '',
|
|
|
+ averagePrice: '',
|
|
|
+ averagePurchaseAdvance: '',
|
|
|
+ isEnable: '',
|
|
|
+ delFlag: '',
|
|
|
+ zuzhi: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ orgName:[{ required: true, message: '请输入所属组织', trigger: 'blur' }],
|
|
|
+ code:[{ required: true, message: '请输入物料基本分类编码', trigger: 'blur' }],
|
|
|
+ materialType:[{ required: true, message: '请输入物料基本分类名称', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ checkList: [],
|
|
|
+ disable: true,
|
|
|
+ biao: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTreeData()
|
|
|
+ //
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取树形结构
|
|
|
+ getTreeData(data) {
|
|
|
+ getTree(data).then(res => {
|
|
|
+ let {code, rows} = res
|
|
|
+ if(code === 200) {
|
|
|
+ this.data = rows
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取物料基本分类详情
|
|
|
+ getDetailData(id) {
|
|
|
+ getDetail(id).then(res => {
|
|
|
+ let {code, data} = res
|
|
|
+ if (code === 200) {
|
|
|
+ console.log('data', data)
|
|
|
+ this.ruleForm = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ clickTree(data){
|
|
|
+ console.log('data', data)
|
|
|
+ // 如果点击新增时选择了树形节点，则不回显数据
|
|
|
+ if (this.disable) {
|
|
|
+ this.getDetailData(data.id)
|
|
|
+ }
|
|
|
+ // 标记是否为树形结构最外层
|
|
|
+ this.biao = data.id
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ alert(this.biao)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ console.log(formName)
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ this.disable = true
|
|
|
+ },
|
|
|
+ // 点击新增按钮
|
|
|
+ addClassify() {
|
|
|
+ // console.log('值呢：', this.ruleForm)
|
|
|
+ // 如果点击了树形节点后再点击新增，则清空数据再填写
|
|
|
+ if(this.biao !== 0) {
|
|
|
+ this.$refs['ruleForm'].resetFields();
|
|
|
+ }
|
|
|
+ this.disable = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.classify {
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
黄梓星