jf-frock/src/views/BidSystem/ProductDeOrder/infoDetail.vue

<template>
  <div class="changeDetail">
    <Toptitle :title="type == 3 ? '生产拆单详情' : '生产拆单新增'">
      <slot name="titleButton">
        <Button type="primary" style="margin-right: 10px" v-if="type == 6"
          >开启拆单</Button
        >
        <Button type="primary" style="margin-right: 10px" v-if="type == 3"
          >批量下生产</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
        <Button
          type="primary"
          style="margin-right: 10px"
          v-if="type == 6"
          @click="save"
          >保存</Button
        >
      </slot>
    </Toptitle>
    <div class="content">
      <div class="form">
        <Form class="form_content" :label-width="100">
          <FormItem label="项目编号:">
            <Input v-if="type == 6" v-model="saveData.order_no" placeholder="请输入项目编码"/>
            <span style="width: 120px" v-else>{{ formData.order_no }}</span>
          </FormItem>
          <FormItem label="项目名称:">
            <Input v-if="type == 6" v-model="saveData.residential_name" placeholder="请输入项目名称"/>
            <span v-else>{{ formData.residential_name }}</span>
          </FormItem>
          <FormItem label="项目简称:">
            <Input v-if="type == 6" v-model="saveData.abbreviation" placeholder="请输入项目简称"/>
            <span v-else>{{ formData.abbreviation }}</span>
          </FormItem>
          <FormItem label="客户名称:">
            <Select
              filterable
              clearable
              v-model="saveData.custom_title"
              v-if="type == 6"
            >
              <Option
                v-for="(item, index) in custom_title_list"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.custom_title }}</span>
          </FormItem>
          <FormItem label="紧急程度:">
            <Select
              clearable
              v-model="saveData.warning_state"
              v-if="type == 6"
            >
              <Option
                v-for="(item, index) in warning_state_list"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.warning_state }}</span>
          </FormItem>
          <FormItem label="项目定金:">
            <Input v-if="type == 6" v-model="saveData.front_money" placeholder="请输入项目定金"/>
            <span v-else>{{ formData.front_money }}</span>
          </FormItem>
          <FormItem label="详细地址:">
            <Input v-if="type == 6" v-model="saveData.address" placeholder="请输入详细地址"/>
            <span v-else>{{ formData.address }}</span>
          </FormItem>
          <FormItem label="手机号:">
            <Input v-if="type == 6" v-model="saveData.mobile" placeholder="请输入手机号"/>
            <span v-else>{{ formData.mobile }}</span>
          </FormItem>
          <FormItem label="开始日期:">
            <DatePicker
              type="date"
              v-model="saveData.start_time"
              placeholder="年/月/日"
              style="width: 150px"
              v-if="type == 6"
            ></DatePicker>
            <span v-else>{{ formData.start_time }}</span>
          </FormItem>
          <FormItem label="交付日期:">
            <DatePicker
              type="date"
              v-model="saveData.end_time"
              placeholder="年/月/日"
              style="width: 150px"
              v-if="type == 6"
            ></DatePicker>
            <span v-else>{{ formData.end_time }}</span>
          </FormItem>
          <FormItem label="业务员:">
            <Select
              filterable
              clearable
              v-model="saveData.nickname"
              v-if="type == 6"
            >
              <Option
                v-for="(item, index) in nickname_list"
                :key="index"
                :label="item.nickname"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.nickname }}</span>
          </FormItem>
          <FormItem label="备注:">
            <Input v-if="type == 6" v-model="saveData.remark" type="textarea" placeholder="请输入备注"/>
            <span v-else>{{ formData.remark }}</span>
          </FormItem>
        </Form>
      </div>
      <Card style="width: 100%" class="card">
        <div class="form_middle">
          <Form class="form_middle_content" :label-width="100">
            <FormItem label="区域编码:">
              <Select
                filterable
                multiple
                v-model="searchData.area_code"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in area_code"
                  :key="index"
                  :label="item.area_code"
                  :value="item.area_code"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="区域名称:">
              <Select
                filterable
                multiple
                v-model="searchData.area_title"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in area_title"
                  :key="index"
                  :label="item.area_title"
                  :value="item.area_title"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="户型:">
              <Select
                filterable
                multiple
                v-model="searchData.house_type"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in house_type"
                  :key="index"
                  :label="item.house_type"
                  :value="item.house_type"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="楼栋:">
              <Select
                filterable
                multiple
                v-model="searchData.house"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in house"
                  :key="index"
                  :label="item.house"
                  :value="item.house"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="单元:">
              <Select
                filterable
                multiple
                v-model="searchData.unit"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in unit"
                  :key="index"
                  :label="item.unit"
                  :value="item.unit"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="楼层:">
              <Select
                filterable
                multiple
                v-model="searchData.layer"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in layer"
                  :key="index"
                  :label="item.layer"
                  :value="item.layer"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="房号:">
              <Select
                filterable
                multiple
                v-model="searchData.number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in number"
                  :key="index"
                  :label="item.number"
                  :value="item.number"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="位置:">
              <Select
                filterable
                multiple
                v-model="searchData.position"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in position"
                  :key="index"
                  :label="item.position"
                  :value="item.position"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="产品分类:">
              <Select
                filterable
                multiple
                v-model="searchData.product_type"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in product_type"
                  :key="index"
                  :label="item.product_type"
                  :value="item.product_type"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="图号:">
              <Select
                filterable
                multiple
                v-model="searchData.url_number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in url_number"
                  :key="index"
                  :label="item.url_number"
                  :value="item.url_number"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="产品名称:">
              <Select
                filterable
                multiple
                v-model="searchData.product_title"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in product_title"
                  :key="index"
                  :label="item.product_title"
                  :value="item.product_title"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="材质:">
              <Select
                filterable
                clearable
                v-model="searchData.material"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in material"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="颜色:">
              <Select
                filterable
                clearable
                v-model="searchData.color"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in color"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="工艺:">
              <Select
                filterable
                clearable
                v-model="searchData.work"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in work"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="左右式:">
              <Select
                filterable
                multiple
                v-model="searchData.fashion"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in fashion"
                  :key="index"
                  :label="
                    item.fashion === 0
                      ? '无'
                      : item.fashion === 1
                      ? '左式'
                      : '右式'
                  "
                  :value="item.fashion"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="拆单状态:">
              <Select
                filterable
                clearable
                v-model="searchData.state"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in state"
                  :key="index"
                  :label="item.state === 0 ? '未拆单' : '已拆单'"
                  :value="item.state"
                ></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button
                @click="search"
                style="margin-right: 10px"
                type="primary"
                ghost
                >搜索</Button
              >
            </FormItem>
          </Form>
        </div>
        <Tabs type="card" @on-click="getData">
          <TabPane
            v-for="tab in tabs"
            :key="tab"
            :label="tab == 1 ? '汇总' : '明细'"
            style="margin: 0 auto"
          >
            <div v-show="tab === 1">
              <Table :columns="totalColumns" :data="totalData" border> </Table>
              <Page
                :page-size-opts="[10, 20, 30, 40, 100, 1000]"
                @on-page-size-change="changeTotalSize"
                @on-change="changeTotalPage"
                :current="page_index"
                show-total
                :total="total"
                show-sizer
                :page-size="page_size"
                style="text-align: center; margin-top: 10px"
              />
            </div>
            <div v-show="tab === 2">
              <Table :columns="detailColumns" :data="detailData" border>
              </Table>
              <Page
                :page-size-opts="[10, 20, 30, 40, 100, 1000]"
                @on-page-size-change="changeDetailSize"
                @on-change="changeDetailPage"
                :current="page_index"
                show-total
                :total="total"
                show-sizer
                :page-size="page_size"
                style="text-align: center; margin-top: 10px"
              />
            </div>
          </TabPane>
          <div  slot="extra" class="upload">
          <Button
            @click="handleTabsAdd"
            size="small"
            style="margin-right: 10px"
            type="primary"
            ghost
            v-if="type == 6"
            >新增</Button
          >
           <Upload
           :headers="headers"
          :show-upload-list="false"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/explode_save_import_new'" 
          v-if="type == 6"
          style="margin-right: 10px"
        >
          <Button
            size="small"
            type="primary"
            ghost
            >导入</Button
          >
           </Upload>
           </div>
        </Tabs>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ]},
      totalColumns: [
        { type: "selection", align: "center", width: 60 },
        { title: "序号", align: "center", type: "index", minWidth: 200 },
        {
          title: "产品分类",
          align: "center",
          key: "product_type",
          minWidth: 200,
        },
        {
          title: "产品名称",
          align: "center",
          key: "product_title",
          minWidth: 200,
        },
        { title: "图号", align: "center", key: "url_number", minWidth: 200 },
        { title: "型号", align: "center", key: "model", minWidth: 200 },
        { title: "数量", align: "center", key: "num", minWidth: 200 },
        { title: "长", align: "center", key: "long", minWidth: 200 },
        { title: "宽", align: "center", key: "wide", minWidth: 200 },
        { title: "高", align: "center", key: "high", minWidth: 200 },
        { title: "材质", align: "center", key: "material", minWidth: 200 },
        { title: "颜色", align: "center", key: "color", minWidth: 200 },
        { title: "工艺", align: "center", key: "work", minWidth: 200 },
        { title: "图纸", align: "center", key: "url", minWidth: 200 },
        { title: "左右式", align: "center", key: "fashion", minWidth: 200 },
        { title: "备注", align: "center", key: "remark", minWidth: 200 },
        { title: "拆单状态", align: "center", key: "state", minWidth: 200 },
        { title: "操作", align: "center", minWidth: 200 },
      ],
      totalData: [],
      headers: { Authorization: localStorage.getItem("token") },
      detailColumns: [
        { type: "selection", align: "center", width: 60 },
        { title: "序号", align: "center", type: "index", minWidth: 200 },
        { title: "区域编码", align: "center", key: "area_code", minWidth: 200 },
        {
          title: "区域名称",
          align: "center",
          key: "area_title",
          minWidth: 200,
        },
        { title: "户型", align: "center", key: "house_type", minWidth: 200 },
        { title: "楼栋", align: "center", key: "house", minWidth: 200 },
        { title: "单元", align: "center", key: "unit", minWidth: 200 },
        { title: "楼层", align: "center", key: "layer", minWidth: 200 },
        { title: "房号", align: "center", key: "number", minWidth: 200 },
        { title: "位置", align: "center", key: "position", minWidth: 200 },
        {
          title: "产品分类",
          align: "center",
          key: "product_type",
          minWidth: 200,
        },
        {
          title: "产品名称",
          align: "center",
          key: "product_title",
          minWidth: 200,
        },
        { title: "图号", align: "center", key: "url_number", minWidth: 200 },
        { title: "型号", align: "center", key: "model", minWidth: 200 },
        { title: "数量", align: "center", key: "num", minWidth: 200 },
        { title: "长", align: "center", key: "long", minWidth: 200 },
        { title: "宽", align: "center", key: "wide", minWidth: 200 },
        { title: "高", align: "center", key: "high", minWidth: 200 },
        { title: "材质", align: "center", key: "material", minWidth: 200 },
        { title: "颜色", align: "center", key: "color", minWidth: 200 },
        { title: "工艺", align: "center", key: "work", minWidth: 200 },
        { title: "图纸", align: "center", key: "url", minWidth: 200 },
        { title: "左右式", align: "center", key: "fashion", minWidth: 200 },
        { title: "备注", align: "center", key: "remark", minWidth: 200 },
        { title: "拆单状态", align: "center", key: "state", minWidth: 200 },
        { title: "操作", align: "center", minWidth: 200 },
      ],
      detailData: [],
      saveData: {
        abbreviation: "",
        address: "",
        custom_title: "",
        end_time: "",
        front_money: "",
        mobile: "",
        nickname: "",
        order_no: "",
        remark: "",
        residential_name: "",
        start_time: "",
        warning_state: "",
      },
      formData:{},
      custom_title_list:[],
      warning_state_list:[],
      nickname_list:[],
      searchData: {
        area_code: [],
        area_title: [],
        house_type: [],
        product_type: [],
        fashion: [],
        house: [],
        unit: [],
        layer: [],
        number: [],
        position: [],
        url_number: [],
        product_title: [],
        material: "",
        color: "",
        work: "",
        state: "",
      },
      area_code: [],
      area_title: [],
      house_type: [],
      house: [],
      unit: [],
      layer: [],
      number: [],
      position: [],
      url_number: [],
      product_title: [],
      product_type: [],
      fashion: [],
      material: [],
      color: [],
      work: [],
      state: [],
      search_state: false,
      copy_form: [],
      type: this.$route.query.type,
      formData: {},
      tabs: 2,
      total: 0,
      page_index: 1,
      page_size: 10,
      save_state:false,
    };
  },
  created() {
    if (this.$route.query.type == 3) {
      this.axios
        .get("/api/order_area_orders", {
          params: { order_no: this.$route.query.order_no },
        })
        .then((res) => {
          this.formData = res.msg;
        });
      this.getData();
    }else{
        this.axios.get('/api/custom_list').then(res=>{ this.custom_title_list = res.data.data});
        this.axios.get('/api/warning_list').then(res=>{ this.warning_state_list = res.data.data });
        this.axios.get('/api/employee_list').then(res=>{ this.nickname_list = res.data });
    }
  },
  methods: {
    changeTotalSize(e) {
      this.page_size = e;
      this.getData();
    },
    changeTotalPage(e) {
      this.page_index = e;
      this.getTotalData();
    },
    changeDetailSize(e) {
      this.page_size = e;
      this.getData(1);
    },
    changeDetailPage(e) {
      this.page_index = e;
      this.getData(1);
    },
    getData(type) {
      if (type === 1) {
        if (this.search_state) {
          this.page_index = 1;
          this.page_size = 10;
          this.axios
            .post("/api/order_area_details", {
              order_no: this.$route.query.order_no,
              page_index: this.page_index,
              page_size: this.page_size,
              ...this.searchData,
            })
            .then((res) => {
              console.log(res);
              this.detailData = res.msg.data;
              this.total = res.msg.total;
            });
        } else {
          this.page_index = 1;
          this.page_size = 10;
          this.axios
            .post("/api/order_area_details", {
              order_no: this.$route.query.order_no,
              page_index: this.page_index,
              page_size: this.page_size,
            })
            .then((res) => {
              console.log(res);
              this.detailData = res.msg.data;
              this.total = res.msg.total;
            });
        }
      } else if (type === 0) {
        //             this.page_index= 1;
        //        this.page_size = 10;
        //   this.axios
        //     .post("/api/order_area_details",
        //        {
        //         ...this.$route.query,
        //         ...{ page_index: this.page_index, page_size: this.page_size },
        //         ...this.searchData
        //       },
        //     )
        //     .then((res) => {
        //         this.totalData = res.msg.data;
        //            this.total = res.msg.total;
        //     })
      } else {
        this.page_index = 1;
        this.page_size = 10;
        this.axios
          .post("/api/order_area_details", {
            ...this.$route.query,
            ...{ page_index: this.page_index, page_size: this.page_size },
            ...this.searchData,
          })
          .then((res) => {
              console.log(res.msg.house_type,this.house_type)
            this.totalData = res.msg.data;
            this.total = res.msg.total;
            this.area_code = res.msg.area_code;
            this.area_title = res.msg.area_title;
            this.color = res.msg.color;
            this.fashion = res.msg.fashion;
            this.house = res.msg.house;
            this.house_type = res.msg.house_type;
            this.layer = res.msg.layer;
            this.material = res.msg.material;
            this.number = res.msg.number;
            this.position = res.msg.position;
            this.product_title = res.msg.product_title;
            this.product_type = res.msg.product_type;
            this.state = res.msg.state;
            this.unit = res.msg.unit;
            this.url_number = res.msg.url_number;
            this.work = res.msg.work;
            this.copy_form = this.searchData;
          });
      }
    },
     uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    uploadSuccess(res) {
        if(this.save_state == true){
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
      this.page_index = 1;
        this.page_size = 10;
        this.axios
          .post("/api/order_area_details", {
            ...this.$route.query,
            ...{ page_index: this.page_index, page_size: this.page_size },
            order_no:this.saveData.order_no
          })
          .then((res) => {
              console.log(res)
            this.totalData = res.msg.data;
            this.total = res.msg.total;
            this.area_code = res.msg.area_code;
            this.area_title = res.msg.area_title;
            this.color = res.msg.color;
            this.fashion = res.msg.fashion;
            this.house = res.msg.house;
            this.house_type = res.msg.house_type;
            this.layer = res.msg.layer;
            this.material = res.msg.material;
            this.number = res.msg.number;
            this.position = res.msg.position;
            this.product_title = res.msg.product_title;
            this.product_type = res.msg.product_type;
            this.state = res.msg.state;
            this.unit = res.msg.unit;
            this.url_number = res.msg.url_number;
            this.work = res.msg.work;
            this.copy_form = this.searchData;
          });
        }else{
            this.$message.error('请先保存！')
        }
    },
    save() {
        if(!this.saveData.order_no&&!this.saveData.residential_name&&!this.saveData.abbreviation&&!this.saveData.custom_title&&!this.saveData.warning_state){
            this.$message.error('请填写必要信息！');
        }else{ 
            this.axios.post('/api/order_area_save',{...this.saveData}).then(res=>{
           this.$message.success(res.msg)
           this.save_state = true;
      })

        }
     
    },
    goback() {
      this.$router.go(-1);
    },
    handleTabsAdd() {
      this.tabs++;
    },
    search() {
      this.search_state = true;
      this.getData();
    },
  },
};
</script>
<style scoped lang='scss'>
.changeDetail {
  .content {
    overflow: auto;
    height: 680px;
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
    .card {
      .form_middle {
        .form_middle_content {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
}
.ivu-form-item{
    width: 250px;
}
.upload{
    display: flex;
    justify-content: space-around;
}
</style>